sssss

最新推荐文章于 2024-08-17 23:58:49 发布

末日空虚

最新推荐文章于 2024-08-17 23:58:49 发布

阅读量97

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/2301_77415908/article/details/131110129

版权

该文章展示了一段CSS和HTML代码，用于创建一个具有特定布局的网页。包括头部背景、导航栏、内容区域的多个部分如新闻、下载和公告等，并使用了样式规则进行美化。网页设计采用了响应式和定位技术来实现各个元素的精确摆放。

摘要由CSDN通过智能技术生成

@charset "utf-8";
body,ul,li,h1，h3{
margin:0;
padding:0;
list-style:none;
}
#all{
width:1200px;
margin:auto;
position:relative;
}
header{
background:url(images/03.jpg) no-repeat;
height:341px;
}
#top
{
   font:14px "宋体";
   color:#859411;
   text-align: right;
   padding: 12px 70px;
}
nav
{
   background-color:#FC0;
   height:32px;
   line-height:20px;
   padding-top:5px;
   padding-left:500px;
}
nav a{
   float: left;
   margin: 0 13px;
   font:bold 14px "宋体";
   text-decoration:none;
   color:#000;
   line-height: 32px;
   }
nav a:hover,nav a.select
{
   color:#184609;
}
#content{
   background:url(images/bgg.jpg) repeat-x;
   height:420px;
   position:relative;
}
#content #xxnews{
   width:340px;
   height:180px;
   position:absolute;
   left:0px;
   padding: 5px 0 0 10px;
}
h1{
   font:normal 16px "黑体";
   background:url(images/ico.gif) no-repeat;
   padding:0 5px 0px 10px;
}
#xxnews li,#xydt li,#tzgg li{
   background:url(images/ico1.gif) no-repeat 1px center;
   border-bottom:dashed 1px #666666;
   padding:0 5px 0 10px;
   width:290px;
}
#xxnews li a,#xydt li a,#tzgg li a{
   font:12px "宋体";
   text-decoration:none;
   color:#000000;
   line-height: 25px;
}
#xxnews li a:hover，#xydt li a：hover,#tzgg li a:hover{
color:#0000FF;
}
.more
{
   position: absolute;
   top: 20px;
   right: 36px;
   color: #333333;
   text-decoration: none;
}
#content #xxfj{
   width:830px;
   height:180px;
   position:absolute;
   right:5px;
   padding: 5px 0 0 10px;
}
#content #xxfj img{
   width:190px;
   height:140px;
   border:solid 1px #666666;
   margin:8px 4px;
   padding:2px;
   background-color:#FFFFFF;
}
#content #xydt{
   width:320px;
   height:180px;
   position:absolute;
   left:0px;
   top:205px;
   padding: 5px 0 0 10px;
}
#content #tzgg{
   width:320px;
   height:180px;
   position:absolute;
   left:330px;
   top:205px;
   padding: 5px 0 0 10px;
}
#content #ggfw{
   width:510px;
   height:180px;
   position:absolute;
   left:660px;
   top:205px;
   padding: 5px 0 0 15px;
   }
footer
{
    height:60px;
   background-color:#000000;
   font-size:12px;
   color:#FFFFFF;
   text-align: center;
   line-height: 25px;
   padding-top:10px;
}
#lujing {
   height: 37px;
   text-align: left;
   line-height: 35px;
   background-color: #cccccc;
   border-bottom:#000 dotted 1px;
   padding-left:20px;
}
#lujing a {
   color: #333333;
   text-decoration: none;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 5px;
   margin-right: 5px;
}
#text {
   width: 1120px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 40px;
   padding-right: 40px;
   background-color: #cccccc;
}
h3 {
   text-align:center;
}
h4 {
   text-align:center;
   font-size:12px;
   font-weight:normal;
}
#all #text p {
   font-size:14px;
   text-indent:28px;
   line-height:25px;
}
h5{
   text-align:right;
   font-weight:normal;
   font-size:12px;
}
#all #text #sxw{
   text-align:left;
   font-size:14px;
   line-height:30px;
}
#all #text span{
   color:#F00;
   }