首页 前端知识 HBuilderX 制作网页(大国工匠)

HBuilderX 制作网页(大国工匠)

2024-01-25 10:01:48 前端知识 前端哥 742 723 我要收藏

css代码                                                                        

body,ul,li,form,input,h1,h2,h3,h4,h5,nav,a,div,p{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
}
ul,li,ol{
    list-style:none;
}
#top{
    width:1000px;
    height:40px;
    line-height:40px;
    margin:0 auto;    
}
#top_left{
    float:left;
}
#top_right{
    float:right
}
.clearfix{
    clear:both;
}
#top ul li{
    float:left;
    margin-right:20px;
}
#top ul li a{
    color:#666666;
    font-size:14px;
}
#banner{
    width:100%;
    height:295px;
    background-image: url(../img/banner.jpg);
    background-position: center top;
    background-size:100% 295px;
}
#nav_bg{
    width:100%;
    height:44px;
    line-height:44px;
    background:url(../img/bg_nav.jpg) repeat-x left center;
}
nav{
    width:1000px;
    margin:0 auto;
    font-size:0px;
}
nav li{
    display:inline-block;
    width:100px;
    text-align:center;
}
nav li:nth-child(4){
    width:140px;
}
nav a{
    font-weight:bold;
    font-size:18px;
    color: #FFf8d6;
}
nav a:hover{
    color: #7d2a00;
}
#main{
    width:1000px;
    margin:0 auto;
    margin-top:30px;
    overflow: hidden;
}
#news{
    width:650px;
    float:left;
}
#video{
    width:320px;
    float:right;
}
.img_bar{
    width: 100%;
    height: 36px;
    line-height: 36px;
    color: #FFFFFF;
    background: #ec8c25 url(../img/h2_bg.jpg) no-repeat left center;
    font-size: 16px;
    text-indent: 10px;
}
#main h2{
    width:100%;
    font-size:20px;
    margin-top:15px;
    margin-bottom:10px;
    font-weight:normal;
    margin-left:10px;
}
#main h2 a{
    color:#000;    
}
#main h2 a:hover {
    color:#ff0000;
}
.news_list {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;
}

.news_list li {
    height: 25px;
    line-height: 25px;
    background: url(../img/arrow.jpg)no-repeat left center;
    text-indent: 10px;
}

.news_list li a {
    color: #333333;
    font-size: 14px;
}

.new_list li a:hover {
    color: #ec8c25;
}

.news_list2 {
    margin-top: 15px;
}

.news_list2 li {
    background: url(../img/vidicon.gif) no-repeat left center;
    height: 26px;
    line-height: 26px;
    text-indent: 20px;
}

.news_list2 li a {
    font-size: 14px;
    color: #333333;
}

.news_list2 li a:hover {
    color: #005fe9;
}

 #origin{
     width:1000px;
     margin:30px auto;
     overflow: hidden;
 }
 #origin ul{
     margin-top:20px;
 }
 #origin li{
     float:left;
     width:160px;
     margin-right:50px;
     text-align:center;
 }
 #origin li:nth-child(5){
     margin-right:0;
 }
 #origin li a{
     color:#333333;
     font=weight:bold;
 }
 #origin li a:hover{
     color:#EC8C25;
 }
 footer{
     width:1000px;
     margin:40px auto;
     border-top:2px solid #666;
     padding-top:30px
 }
 footer p{
     text-align:center;
     line-height:30px;
     font-size:14px;
     color:#666666;
 }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/287.html
标签
html5
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!