亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

我寫的網頁寬度出現了問題，還有紫色卡片的部分不知道如何讓它居中，求大神指教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標題文檔</title>

<style>

* {

margin:0;

padding:0;

}

nav{

background-color:#999;

height:40px;

}

nav ul{

list-style:none;

}

nav ul li,nav .logo{

height:40px;

line-height:40px;

text-align:center;

float:right;

display:inline-block;

}

nav .logo{

float:left;

font-size:20px;

font-weight:700px;

padding-left:10px;

letter-spacing:1px;

}

nav ul li a,nav .logo a{

text-decoration:none;

? ? margin-right:10px;

display:inline-block;

color:#FFF;

}

.banner{

height:500px;

background-color:#666;

}

.banner .inner{

max-width:250px;

margin:0 auto;

position:relative;

top:160px;

text-align:center;

}

.banner .inner button{

color:#CCC;

border:none;

background-color:#333;

padding:10px 20px;

font-size:16px;

}

.banner .inner p{

margin:30px auto;

line-height:25px;

}

.banner .inner .more{

margin-top:80px;

}

.green{

background-color:#09C;

text-align:center;

color:#fff;

padding:100px 0;

}

.green .wrap{

max-width:780px;

margin:0 auto;

}

.green .wrap .hr{

border:1px solid #078494;

margin:30px auto;

width:65%;

}

.green .wrap .item span{

display:inline-block;

width:100px;

height:100px;

background-color:#0D6F7C;

margin:50px 30px;

-webkit-transform:rotate(45deg);

}

.wrap p{

margin:30px auto;

}

.gray{

background-color:#333;

clear:both;

}


.article:after{

content:"";

display:block;

clear:both;

}?

.article:nth-child(odd){

background-color:rgba(255,255,255,0.05);

}

.gray .article .img{

width:45%;

}

.gray .article .text{

width:55%;

}

.gray .img img{

width:100%;

}

.article > div{

float:left;

}

.gray .text{

position:relative;

top:70px;

left:80px;

}

.text h2{

margin-bottom:20px;

}

.purple{

background-color:#60F;

text-align:center;

padding:100px 0;

}

.content{

margin:0 auto;

}

.content h1{

margin-bottom:20px;

}

.card{

width:50%;

min-height:100px;

}



</style>

</head>


<body>

<header>

? ?<nav>

? ? ? <div class="logo"><a href="#">王小白</a></div>

? ? ? <ul>

? ? ? ? ?<li><a href="#">注冊</a></li>

? ? ? ? ?<li><a href="#">聯系</a></li>

? ? ? ? ?<li><a href="#">注冊</a></li>

? ? ? ? ?<li><a href="#">登錄</a></li>

? ? ? </ul>

? ?</nav>

? ?<div class="banner">

? ? ? ?<div class="inner">

? ? ? ? ? ?<h1>王小白</h1>

? ? ? ? ? ?<p>這是一個神奇的地方，在這里你將得到魔法，很神奇吧，快加入我們吧！</p>

? ? ? ? ? ?<button>了解我</button>

? ? ? ? ? ?<div class="more">更多</div>


? ? ? ?</div>

? ?</div>

</header><!--頁眉-->

<div class="content">

? ? ?<div class="green">

? ? ? ? ?<div class="wrap">

? ? ? ? ? ? ? <h2>一個標題</h2>

? ? ? ? ? ? ? <div class="hr"></div>

? ? ? ? ? ? ? <p>你可知誰嗎?等等我魁岸設計者滑稽記者都叫我的就是頂尖的減肥就餓哦</p>

? ? ? ? ? ? ? <div class="item">

? ? ? ? ? ? ? ? ? <span>1</span>

? ? ? ? ? ? ? ? ? <span>2</span>

? ? ? ? ? ? ? ? ? <span>3</span>

? ? ? ? ? ? ? </div>

? ? ? ? ?</div>

? ? ?</div>

? ? ?<div class="gray">

? ? ? ? ?<div class="article">

? ? ? ? ? ? ?<div class="img"><img src="img/pic01.jpg" /></div>

? ? ? ? ? ? ?<div class="text">

? ? ? ? ? ? ? ? ? <h2>又一個標題</h2>

? ? ? ? ? ? ? ? ? <p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>

? ? ? ? ? ? ?</div>

? ? ? ? ?</div>

? ? ? ? ?<div class="article">

? ? ? ? ? ? ?<div class="text">

? ? ? ? ? ? ? ? ? <h2>又一個標題</h2>

? ? ? ? ? ? ? ? ? <p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>

? ? ? ? ? ? ?</div>

? ? ? ? ? ? ?<div class="img"><img src="img/pic02.jpg" /></div>

? ? ? ? ?</div>

? ? ? ? ?<div class="article">

? ? ? ? ? ? ?<div class="img"><img src="img/pic03.jpg" /></div>

? ? ? ? ? ? ?<div class="text">

? ? ? ? ? ? ? ? ? <h2>又一個標題</h2>

? ? ? ? ? ? ? ? ? <p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>

? ? ? ? ? ? ?</div>

? ? ? ? ?</div>

? ? ?</div>

? ? ?<div class="purple">

? ? ? ? ?<div class="content">

? ? ? ? ? ? ? <h1>標題</h1>

? ? ? ? ? ? ? <p>真正的堅韌，應該是哭的時候要徹底，笑的時候要開懷，說的時候要淋漓盡致，做的時候不要猶豫。</p>

? ? ? ? ? ? ? <div class="cards">

? ? ? ? ? ? ? ? ? <div class="card">

? ? ? ? ? ? ? ? ? ? ? ?<h3>標題三</h3>

? ? ? ? ? ? ? ? ? ? ? ?<p>活著一天，就是有福氣，就該珍惜。當我哭泣我沒有鞋子穿的時候，我發現有人卻沒有腳。</p>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="card"></div>

? ? ? ? ? ? ? </div>

? ? ? ? ?</div>

? ? ?</div>

</div><!--內容-->

<footer></footer><!--頁腳-->

</body>

</html>


正在回答

2 回答

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>無標題文檔</title>
????<style>
????????*?{
????????????margin:0;
????????????padding:0;
????????}
????????nav{
????????????background-color:#999;
????????????height:40px;
????????}
????????nav?ul{
????????????list-style:none;
????????}
????????nav?ul?li,nav?.logo{
????????????height:40px;
????????????line-height:40px;
????????????text-align:center;
????????????float:right;
????????????display:inline-block;
????????}
????????nav?.logo{
????????????float:left;
????????????font-size:20px;
????????????font-weight:700;
????????????padding-left:10px;
????????????letter-spacing:1px;
????????}
????????nav?ul?li?a,nav?.logo?a{
????????????text-decoration:none;
????????????margin-right:10px;
????????????display:inline-block;
????????????color:#FFF;
????????}
????????.banner{
????????????height:500px;
????????????background-color:#666;
????????}
????????.banner?.inner{
????????????max-width:250px;
????????????margin:0?auto;
????????????position:relative;
????????????top:160px;
????????????text-align:center;
????????}
????????.banner?.inner?button{
????????????color:#CCC;
????????????border:none;
????????????background-color:#333;
????????????padding:10px?20px;
????????????font-size:16px;
????????}
????????.banner?.inner?p{
????????????margin:30px?auto;
????????????line-height:25px;
????????}
????????.banner?.inner?.more{
????????????margin-top:80px;
????????}
????????.green{
????????????background-color:#09C;
????????????text-align:center;
????????????color:#fff;
????????????padding:100px?0;
????????}
????????.green?.wrap{
????????????max-width:780px;
????????????margin:0?auto;
????????}
????????.green?.wrap?.hr{
????????????border:1px?solid?#078494;
????????????margin:30px?auto;
????????????width:65%;
????????}
????????.green?.wrap?.item?span{
????????????display:inline-block;
????????????width:100px;
????????????height:100px;
????????????background-color:#0D6F7C;
????????????margin:50px?30px;
????????????-webkit-transform:rotate(45deg);
????????}
????????.wrap?p{
????????????margin:30px?auto;
????????}
????????.gray{
????????????background-color:#333;
????????????clear:both;
????????}

????????.article:after{
????????????content:"";
????????????display:block;
????????????clear:both;
????????}
????????.article:nth-child(odd){
????????????background-color:rgba(255,255,255,0.05);
????????}
????????.gray?.article?.img{
????????????width:45%;
????????}
????????.gray?.article?.text{
????????????width:55%;
????????}
????????.gray?.img?img{
????????????width:100%;
????????}
????????.article?>?div{
????????????float:left;
????????}
????????.gray?.text{
????????????position:relative;
????????????top:70px;
????????????/***這里是造成寬度的問題**/
????????????/*left:80px;*/
????????}
????????/**這里來替代上面left80的效果***/
????????.text?h2,.text?p{
????????????padding:?0?80px;
????????}
????????.text?h2{
????????????margin-bottom:20px;
????????}
????????.purple{
????????????background-color:#60F;
????????????text-align:center;
????????????padding:100px?0;
????????}
????????.content{
????????????margin:0?auto;
????????}
????????.content?h1{
????????????margin-bottom:20px;
????????}
????????.card{
????????????width:50%;
????????????min-height:100px;
????????}


????</style>
</head>

<body>
<header>
????<nav>
????????<div?class="logo"><a?href="#">王小白</a></div>
????????<ul>
????????????<li><a?href="#">注冊</a></li>
????????????<li><a?href="#">聯系</a></li>
????????????<li><a?href="#">注冊</a></li>
????????????<li><a?href="#">登錄</a></li>
????????</ul>
????</nav>
????<div?class="banner">
????????<div?class="inner">
????????????<h1>王小白</h1>
????????????<p>這是一個神奇的地方，在這里你將得到魔法，很神奇吧，快加入我們吧！</p>
????????????<button>了解我</button>
????????????<div?class="more">更多</div>

????????</div>
????</div>
</header><!--頁眉-->
<div?class="content">
????<div?class="green">
????????<div?class="wrap">
????????????<h2>一個標題</h2>
????????????<div?class="hr"></div>
????????????<p>你可知誰嗎?等等我魁岸設計者滑稽記者都叫我的就是頂尖的減肥就餓哦</p>
????????????<div?class="item">
????????????????<span>1</span>
????????????????<span>2</span>
????????????????<span>3</span>
????????????</div>
????????</div>
????</div>
????<div?class="gray">
????????<div?class="article">
????????????<div?class="img"><img?src="http://img1.sycdn.imooc.com//user/562f902d0001198b01800180-40-40.jpg"?/></div>
????????????<div?class="text">
????????????????<h2>又一個標題</h2>
????????????????<p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>
????????????</div>
????????</div>
????????<div?class="article">
????????????<div?class="text">
????????????????<h2>又一個標題</h2>
????????????????<p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>
????????????</div>
????????????<div?class="img"><img?src="http://img1.sycdn.imooc.com//user/562f902d0001198b01800180-40-40.jpg"?/></div>
????????</div>
????????<div?class="article">
????????????<div?class="img"><img?src="http://img1.sycdn.imooc.com//user/562f902d0001198b01800180-40-40.jpg"?/></div>
????????????<div?class="text">
????????????????<h2>又一個標題</h2>
????????????????<p>家拍賣等口岸配圖它們摩奧赴歐餓哦無IC就到了</p>
????????????</div>
????????</div>
????</div>
????<div?class="purple">
????????<!--這里給一個寬--->
????????<div?class="content">
????????????<h1>標題</h1>
????????????<p>真正的堅韌，應該是哭的時候要徹底，笑的時候要開懷，說的時候要淋漓盡致，做的時候不要猶豫。</p>
????????????<div?class="cards?article"?style="width:?1000px;margin:?0?auto;">
????????????????<div?class="card"?style="float:?left">
????????????????????<div?style="padding:?10px;">
????????????????????????<h3>標題三</h3>
????????????????????????<p?style="text-align:?left">活著一天，就是有福氣，就該珍惜。當我哭泣我沒有鞋子穿的時候，我發現有人卻沒有腳。</p>
????????????????????</div>
????????????????</div>
????????????????<div?class="card"?style="float:?left">
????????????????????<div?style="padding:?10px;overflow:?auto">
????????????????????????<h3>標題三</h3>
????????????????????????<p?style="text-align:?left">活著一天，就是有福氣，就該珍惜。當我哭泣我沒有鞋子穿的時候，我發現有人卻沒有腳。</p>
????????????????????</div>
????????????????</div>

????????????</div>
????????</div>
????</div>
</div><!--內容-->
<footer></footer><!--頁腳-->
</body>
</html>


添加的樣式都直接寫到行內了，寬度有問題的在css中加注釋了

0 回復 有任何疑惑可以回復我~
#1

xiao55555 提問者

你好牛??！好了，但是我有些不理解，為什么那個定位哪有問題呢？設置left為什么會出現問題
2015-12-19 回復 有任何疑惑可以回復我~

估計是考慮到ie6，因為除了a標簽，大多數標簽鼠標hover是不被識別的。不過，還是個人建議樣式還是盡量由CSS控制，盡量做到樣式與結構分離。

raaufvsjzgyurgdarlxsngunswpsukoclheyoedenofaorxcwfoldj

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
HTML5和CSS3扁平化風格博客
  • 參與學習       86790    人
  • 解答問題       406    個

HTML5與CSS3搭建超酷扁平化風格博客

進入課程

我寫的網頁寬度出現了問題，還有紫色卡片的部分不知道如何讓它居中，求大神指教

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號