HTML+css个人静态网页练习

摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>灵犀科技</title><style>*{margin:0px;padding: 0px;}a{text-decoration: none;}li{list-style:none ;}

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0px;padding: 0px;}

text-decoration: none;

}

li{

list-style:none ;

}

span{

display: inline-block;

font:16px "微软雅黑",sans-serif;

color: #151515;

line-height: 36px;

}

/*header开始*/

.header{

margin:0 auto;

width: 1002px;

height: 128px;

background-image: url(images/top_bg.jpg);

}

.logo{

float: left;

}

.english{

float: right;

color: #B8B8A5;

font-size: 10px;

margin:6px 20px 0px 0px;

}

.header a:hover{

color: #E3B897;

}

.nav{

clear: both;

height: 37px;

/* background: pink;*/

}

.nav_li{

float: left;

display: inline;

margin-left: 6px;

}

.nav_li li{

float: left;

width: 89px;

height: 37px;

/* margin-left: 3px;*/

margin-right:2px;

}

.li_a{

display: block;

text-align:center;

line-height: 37px;

font: 16px "微软雅黑"，sans-serif;

color: #363636;

}

.nav_li a:hover,onhover{

background: #FF9532 url(nav_on.gif);

color: #FFF;

}

.li_index{

width: 84px;

}

.li_a{

width: 100px;

}

/*search开始*/

.kyword{

width: 190px;

height: 16px;

border: 0px none;

margin:11px 0 0 98px;

float: left;

color:#B9B9B9;

}

.so{

margin-top: 11px;

margin-left: 5px;

}

/*开始banner*/

.banner{

margin: 0 auto;

width: 1002px;

margin-top: 6px;

}

/*main内容开始*/

.main{

width: 1002px;

height: 455px;

margin:0 auto;

}

/*左边*/

.main_left{

float: left;

width: 694px;

height: 455px;

/* border: 1px solid #ccc;*/

clear: both;

}

.left_title{

width: 694px;

height: 36px;

background: #ccc url(images/index_main_top_bg.gif) repeat-x;

line-height: 36px;

}

.left_title_l_right{

float: right;

}

.left_title_m{

float: right;

margin-right: 8px;

/* clear: both;*/

}

.circle_nav{

margin:4px 0px 3px 6px;

float: left;

}

.left_title_l{

float: left;

}

.left_title_p{

margin-left: 3px;

}

.four_service{

width: 692px;height: 416px;

border: 1px solid #D9D9D9;

border-radius: 0px 0px 5px 5px;

}

.four_service p{

color: #000;

font: 20px "微软雅黑",sans-serif;

margin: 1px 0px 0px 5px;

}

.four_service a:hover{

text-decoration: underline;

}

.service_intro a{

font:12px "微软雅黑",sans-serif;

color: #85;

margin:0px 35px 0px 0px;

}

.every_service{

float: left;

margin: 5px 5px 5px 10px;

width: 326px;height: 198px;

background-color: #EFEFEF;

}

.every_service_photo{

float: left;

margin: 12px;

width: 180px;height: 145px;

display: inline;

}

.service_intro{

float: right;

margin-top: 10px;

}

/*右边 */

.main_right{

float: right;

clear: bottom;

}

/*右上*/

.main_right_one{

height: 225px;

}

.right_title{

width: 295px;height: 36px;background: #E7E7E7 url(images/sub_bar_title_bg.gif) repeat-x;

line-height: 36px;

clear: both;

}

/* .right_title{

margin-left:35px;

width: 285px;height: 200px;

}*/

.right_title_m{

float: right;

margin-right: 8px;

}

.right_title_p{

margin-left:35px;

}

.newlist{

background:#EEE url(images/left_nav_bottom_bg.gif) no-repeat bottom;

}

.newlist li{

width: 294px;height: 29px;

}

.newlist li a{

display: block;

width: 269px;height: 29px;background: #eee url(images/article_head.gif)no-repeat;

font: 12px "微软雅黑",sans-serif;

color: #808080;

padding-left:25px;

line-height: 29px;

}

.newlist li a:hover{

background:#EEE url(images/article_on_bg.gif) no-repeat;

color:#FF832C;

}

/*右下*/

.right_title_two{

width: 294px;height: 200px;

}

/*底部 bottom*/

.bottom{

width: 1002px;

height: 35px;

margin:10px auto;

background: #F1F1F1;

}

.bottom li{

float: left;

margin:0px 10px 0 0;

}

.bottom li a{

font-size: 12px/1.2em;

line-height: 35px;

}

.bottom_img_l{

float: left;

}

.footer{

width: 1002px;

margin:0 auto;

font-size: 10px;

}

</style>

</head>

<body>

<div>

English

</a>

<div>

<ul>

</ul>

<p>

</p>

</form>

</div>

<div>

</div>

<div>

</div>

<div>

<p> 电子商务类网站建设</p>

<ul>

</ul>

</div>

<div>

<p> 新闻门户类网站建设</p>

<ul>

</ul>

</div>

<div>

<p> 企业展示类网站建设</p>

<ul>

</ul>

</div>

<div>

<p> 网站维护外包</p>

<ul>

</ul>

</div>

<div>

<ul>

<li><a href="#">闻门户类网站</a></li>

</ul>

</div>

<div>

</div>

<ul>

<li><a href="#">dianhua:******</a></li>

<li><a href="#">dizhi:南宁市青秀区</a></li>

<li><a href="#">闻门户类网站</a></li>

</ul>

</div>

<div>

<ul>

<li><a href="#">常用文档下载</a></li>

</ul>

</div>

<div>

<span>

<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.lionhit.com/css/css.css" title="已通过W3C Valid CSS认证">W3C Valid CSS</a>

</span>

<span>

<a href="http://validator.w3.org/check?uri=referer" title="已通过W3C XHTML Strict认证">W3C Valid XHTML 1.0 Strict</a>

</span>

</div>

</body>

</html>

/*上班时间太多，学习时间极少，感觉进度太慢了，花了两周的时间才把这些学完，囧。。。

老师有什么好建议嘛*/

批改老师：灭绝师太批改时间：2018-11-13 11:50:02
老师总结：完成的不错啊，按照你的学习时间到这个程度很棒了！这个建议的话只能挤时间呀，因为前端没有捷径，只有靠着多练习……

HTML+css个人静态网页练习

热门词条