html的基础编辑摘要
(1)在链接了外部style,如时
尽量在开始时写入所用的所有html元素加上padding:0; margin:0;
如h1,span,ul,body,p,div,h2{ padding:0; margin:0; }
并且为了接下来布局简便快捷可以用如下操作以去掉多余格式
li { list-style:none; }
img { border:none; }
a { text-decoration:none; }
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>求索网作业</title>
<style>
.dingduan {
width: 100%;
height: 40px;
line-height: 40px;
background-color: black;
}
.zuoce {
margin: 0 auto;
width: 1250px;
}
.dingduan a {
font-size: 12px;
color: #B0B0B0;
text-decoration:none;
}
.dingduan a:hover {
color: #fff;
}
.diyihang li{
float: left;
list-style:none;
}
.diyihang li a {
float: left;
padding: 0 7px;
text-decoration:none;
}
.diyihang li :first-child a {
padding-left: 0;
}
.b {
float: left;
color: #393E3E;
}
.zhongyou {
float: right;
}
.zhongyou a {
float: left;
margin: 0 7px;
text-decoration:none;
}
.c {
padding: 0 26px 0 10px;
}
.gou{
float:right;
font-size: 12px;
}
.wu{
float:right;
margin-right:10px;
}
.dierhang{
width: 1250px;
height: 100px;
margin: 0 auto;
}
.er{
width: 1250px;
height: 100px;
line-height: 100px;
}
.logo{
margin-left:37px;
float: left;
margin-top:20px;
}
.er .text ul li{
float: left;
color: #ccc;
font-size:20px;
list-style:none;
text-align:center;
}
.er .text ul li a{
display: block;
color: #000;
padding: 0 8px;
text-decoration:none;
}
.er .text ul li a:hover{
color: pink;
}
.er .search{
margin-right:-152px;
float: right;
cursor:pointer;
}
.liebiao{
width: 1250px;
height: 500px;
margin: 0 auto;
float:left;
}
.liezuo{
background: black;
width: 234px;
height: 500px;
float: left;
margin-left:-47px;
}
.liezuo ul{
margin-left:-40px;
list-style:none;
}
.liebiao .liezuo ul li{
width: 234px;
height: 40px;
padding-left:30px;
}
.liebiao .liezuo ul li a{
display: inline-block;
line-height: 50px;
text-decoration:none;
color: white;
text-align:center;
}
.liebiao .liezuo ul li:hover{
background: #FF6700;
}
.youtu a{
float:left;
}
.guanggao{
width:1250px;
height:200px;
margin:0 auto;
}
.guanggao ul {
float:left;
margin-left:25px;
margin-top:25px;
}
.guanggao ul li{
list-style:none;
}
#liutu{
width:234px;
height:200px;
background:gray;
margin-left:-15px;
float:left;
}
#liutu ul{
width:234px;
height:200px;
margin-left:-30px;
}
#liutu ul li{
float:left;
list-style:none;
width:69px;
height:85px;
cursor:pointer;
}
#liutu ul li p{
text-align:center;
font-size:12px;
width:69px;
}
#liutu ul li img{
margin-left:24px;
}
.santu{
float:left;
width:316px;
height:200px;
margin-left:5px;
cursor:pointer;
}
.santu img{
width:316px;
height:200px;
}
.shangou{
width:1250px;
height:30px;
font-size:30px;
margin:0 auto;
padding-left:85px;
}
.shangou p{
float:left;
width:1250px;
height:30px;
margin-bottom:-20px;
margin-left:5px;
}
.shangoutu{
cursor:pointer;
width:1250px;
height:300px;
margin:0 auto;
}
.asdf{
float:left;
margin: 46px;
width:1250px;
height:300px;
margin-left:7px;
}
.book{
float:left;
width:234px;
height:300px;
list-style:none;
background-color:#f1eded;
}
.books{
margin-left:7.4px;
}
.shangoutu ul li p{
color:red;
text-align:center;
margin-top:30px;
font-size:21px;
}
.shangoutu ul li span{
color:gray;
text-alin:center;
margin-left:65px;
}
.gbds{
margin:25px 95px;
}
.lunbotu {
width:46px;
height:46px;
font-size:24px;
float:left;
background-color:black;
color:#fff;
list-style:none;
}
.maohao{
width:15px;
height:46px;
float:left;
list-style:none;
}
.qwer{
width:168px;
height:46px;
font-size:24px;
text-align:center;
line-height:46px;
margin-left:-7px;
margin-top:25px;
}
.erge {
width:1250px;
height: 750px;
padding:19px 0;
line-height: 22px;
margin:0 auto;
}
.erge a {
font-size: 15px;
color: black;
text-decoration:none;
margin:45px;
}
.erge a:hover {
color: #ff6700;
}
.daji {
float: left;
width: 250px;
height: 750px;
margin-top:15px;
}
.shouji {
float: left;
width: 1000px;
height: 630px;
}
.shouji li {
float: left;
width: 225px;
height: 315px;
text-align: center;
margin: 0 0 14px 14px;
list-style:none;
}
.shouji li a {
margin:0 auto;
}
.shouji li:hover {
top: -2px;
left: 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}
.shouji li p {
margin-top: 10px;
font-size: 12px;
}
.shouji li em {
font-style: normal;
color: #FA6553;
}
.shouji li del {
text-decoration: line-through;
}
.jia {
float:left;
width: 1250px;
height: 750px;
margin:0 auto;
}
.jia li a {
margin:0 auto;
}
.jia li {
float: left;
width: 225px;
height: 375px;
text-align: center;
margin: 0 0 14px 14px;
list-style:none;
}
.jia li:hover {
top: -2px;
left: 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}
.jia li p {
margin-top: 10px;
font-size: 12px;
}
.weibu {
margin:0 auto;
width:1250px;
}
.weixiu {
height: 80px;
width: 1250px;
border-bottom: 1px solid #E0E0E0;
float:left;
margin-top:100px;
}
.weixiu ul {
width:1250px;
height:80px;
}
.weixiu li {
float: left;
height: 79px;
line-height: 79px;
font-size: 16px;
list-style:none;
}
.weixiu a {
float: left;
padding: 0 70px;
color: #616161;
text-decoration:none;
}
.weixiu a:hover {
color: #ff6700;
}
.fuwu {
height: 200px;
width: 1250px;
float: left;
margin:0 auto;
}
.fu {
float: left;
height: 200px;
width: 850px;
margin:0 auto;
}
.fu dl {
float: left;
text-align:center;
font-size: 15px;
margin:0 auto;
width:130px;
}
.fu dt {
padding: 42px 0 32px 40px;
}
.fu dt a {
color: #424242;
text-decoration:none;
}
.fu dd {
padding-bottom: 16px;
}
.fu dd a {
color: #757575;
text-decoration:none;
}
.fu a:hover {
color: #ff6700;
text-decoration:none;
}
.fu {
text-align: center;
}
.wu {
margin-top:30px;
margin-right:80px;
}
.wu h1 {
font-size: 18px;
color: #ff6700;
font-weight: 400;
}
.wu p {
font-size: 12px;
color: #757575;
}
.wu a {