html，css自制静态网页，家居网

八卦谈佚名 ▪ 2023-04-18 09:16:15

学习html。css我自己做的第一个静态网页。

具体源码如下，希望对大家有帮助

<!doctype html>

<html>

<head>

<title>家居网重写</title>

<style>

margin:0;

padding:0;

border:0;

list-style:none;

}

body{

font-family:"微软雅黑";

font-size:16px;

color:#330000;

}

color:#330000;

text-decoration:none;/*清楚默认下划线*/

}

.header{

width:980px;

height:100px;

margin: 0 auto;

padding-top:20px;

overflow:hidden;

border:1px solid red;

}

.header img{

margin-top:2px;

}

.left{

float:left;

}

.right{

float:right;

line-height:82px;

}

a:hover{

color:#66ff00;

text-decoration:none;/*清楚默认下划线*/

}

.nav{

width:980px;

margin:0 auto;

height:40px;

background-color:#ff66cc;

margin-top:5px;

border:1px solid red;

}

.nav ul{

width:980px;

margin:0 auto;

border:1px solid red;

}

.nav ul li{

float:left;

font-size:20px;

line-height:40px;

margin-left:100px;

}

.nav.nAV2.first{

border:1px solid red;

width:100px;

height:40px;

background:#330000;

text-align:center;

}

.banner{

width:980px;

margin:0 auto;

overflow:hidden;/*溢出隐藏*/

}

.banner img.bannerjpg{

margin-top:5px;

position:relative;

left:50%;

margin-left:-800px;

}

.banner ul{

width:980px;

margin:0 auto;

}

.banner ul li{

width:208px;

height:70px;

border:1px solid red;

float:left;

padding:30px 5px 0 30px;

}

.banner ul li img{

float:left;

margin-right:10px;

}

.banner.ul.li h3,p{

float:left;

}

.content{

width:980px;

margin:20px auto 40px;

border:1px solid red;

}

.content h3{

border:1px solid red;

font-size:30px;

margin-bottom:10px;/*下外边距*/

margin-top:10px;

line-height:30px;

}

.content ul.ctt1{

padding:15px 10px 0;

border-top:3px solid green;

overflow:hidden;

}

.content ul.ctt1 li{

float:left;

margin:0 11px 5px 0;

}

.content.ul.ctt1 img{

display:inline-block;/*设置为块显示*/

}

.comtent.ul.ctt1 img .cttpic07, img .cttpic10{

margin-right:0;

}

.content ul.ctt2{

width:980px;

padding-top:10px;

border-top:1px solid red;

overflow:hidden;/*溢出隐藏*/

}

.content ul.ctt2 li{

float:left;

width:280px;

border:1px solid red;

padding:20px 17px;

margin-right:10px;

}

.content ul.ctt2.li3{

margin:0;

}

.content ul.ctt2.li h4{

font-size:16px;

}

.content ul.ctt2.li dl{

width:200px;

height:66px;

border-bottom:1px solid red;

padding-top:20px;

}

.content ul.ctt2 li dl{

float:left;

margin-right:15px;

}

.content ul.ctt2.li.dl h5{

font-size:30px;

}

.content ul.ctt2.li.dl p{

font-size:30px;

}

.footer{

width:980px;

height:80px;

background:#000000;

margin:0 auto;

padding-top:15px;

color:#ffffff;

}

.footer h6,p{

line-height:16px;

font-size:16px;

}

</style>

</head>

<body>

<p>

</p>

<p>

<a href="#">登录</a>|

</p>

<p>

<ul>

</ul>

</p>

<p>

<imgsrc="images/banner.jpg">

<ul>

<li><img src="images/pic01.jpg"><h3>浏览真实设计案例</h3>

<p>设计师原创作品</p></li>

<li><img src="images/pic02.jpg"><h3>找到满意设计师</h3>

<p>设计师云集于此</p></li>

<p>每秒都有设计师在线</p></li>

<li><img src="images/pic04.jpg"><h3>在线担保交易</h3>

<p>资金托管满意担保</p></li>

</ul>

</p>

<p>

<ul>

</ul>

<ul>

<li>

<dl><img src="images/pic01.png"><h5>家居用品哪个品牌好</h5><p>回答：诺美家居用品很不错...</p></dl>

<dl><img src="images/pic02.png"><h5>厨房在哪个方位风水好</h5><p>回答：看风水要看...</p></dl>

<dl><img src="images/pic03.png"><h5>卧室多大比较合适</h5><p>回答：一般卧室的大小...</p></dl>

</li>

<li>

<dl><img src="images/pic04.png"><h5>周小姐提交了设计需求</h5><p>上海110平二手住宅...</p></dl>

<dl><img src="images/pic05.png"><h5>周小姐提交了设计需求</h5><p>四川高新区200平别墅...</p></dl>

<dl><img src="images/pic06.png"><h5>马先生提交了设计需求</h5><p>福建南平150平住宅...</p></dl>

</li>

<li>

<h4>预约设计师</h4>

<dl><img src="images/pic07.png"><h5>李先生预约了酷番做设计</h5><p>长春住宅空间 100平</p></dl>

<dl><img src="images/pic08.png"><h5>李先生预约了一米阳光做设计</h5><p>北京住宅空间 90平</p></dl>

<dl><img src="images/pic09.png"><h5>李先生预约了旋风原创做设计</h5><p>河北住宅空间 130平</p></dl>

</li>

</ul>

</p>

<p>

<h6>免责申明：本网站部分内容由用户自行上传，如果权利人发现存在误传其他作品情形，请及时与本站联系</h6>

</p>

</p>

</body>

</html>

html css 静态网页