HTML与CSS--企业站

最新推荐文章于 2022-05-11 14:53:55 发布

sdsjx01

最新推荐文章于 2022-05-11 14:53:55 发布

阅读量346

点赞数

分类专栏： CSS HTML 文章标签：前段企业站

本文链接：https://blog.csdn.net/sdsjx01/article/details/89414592

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

1:创建企业站步骤
    1:创建结构:js css imags 文件夹
    2:创建首页:index.jsp
    3:创建外部css样式
        ①:声明编码格式
        ②:重置样式
    4:在页面中连接css
2:导航栏:
    1:导航必须使用无序列表UL写
    2:导航项<li>必须嵌套<a>
    3:给li添加浮动
    4:给li添加大小
    5:调整文本
3:新闻列表:
    1:如果有时间,html结构必须:
        <li>
            <a href="#">新闻内容</a>
            <span>2019-03-17</span>
        </li>
    2:给li添加宽和高(行高)
    3:调整文本样式(大小,颜色)
    4:如果有时间,需要给a和span添加浮动 一左一右
    5:列表符号使用背景图的方式给列表添加背景符号
        ①:调整背景图的位置上下居中,然后在用line-height让文本上下居中
    6:给li添加padding-left将背景图漏出

<body>
    <!--logo-->
    <div id="logo">
        <h1>
            <img src="images/timg_03.jpg">
        </h1>
        <div id="logoyc">
            <form action="" class="form1">
                <input type="text" value="sachts" class="text1">
                <input type="button" class="button1">
            </form>
            <ul class="ul1">
                <li id="sy">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">产品中心</a>
                </li>
                <li>
                    <a href="#">解决方案</a>
                </li>
                <li>
                    <a href="#">新闻中心</a>
                </li>
                <li>
                    <a href="#">服务支持</a>
                </li>
                <li>
                    <a href="#">合作伙伴</a>
                </li>
                <li id="butt01">
                    <a href="#">关于我们</a>
                </li>


            </ul>
        </div>
    </div>
<!--大图-->
<div id="bn">
    <img src="images/timg_02.jpg" >
</div>
<!--公司新闻-->
<div id="news">
    <div id="news-1">
        <h2>新闻列表</h2>
        <ul class="news_list">
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>
            <li>
                <a href="#">新闻新闻新闻新闻细纹新闻新闻新闻新闻</a>
                <span>2019-03-17</span>
            </li>

        </ul>
    </div>
    <div id="news-2"></div>
    <div id="news-3"></div>

</div>
</body>

CSS

@charset "UTF-8";
/*清除默认样式*/
*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
b,strong{
    font-weight: normal;
}
i,em{
    font-style: normal;
}
a,u{
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
    font-size: 16px;
    font-weight: normal;
}
/*logo*/
#logo{
    width: 1024px;
    height: 111px;
    margin: 0 auto;
}
#logo h1{
    width: 173px;
    height: 94px;
    float: left;
    padding-top: 17px;
}
#logoyc{
    width: 831px;
    height: 111px;
    float: right;

}
.form1{
    width: 229px;
    height: 29px;
    float: right;
    margin-bottom: 31px;
    padding-top: 24px;
}
.ul1{
    width: 804px;
    height: 22px;

    float: right;
}
.text1{
    width:191px;
    height: 22px;
    color: #bcbcbc;
    padding-left: 10px;
    float: left;
    border: 1px solid #cccccc;
    border-right: none;
}
.button1{
    width: 27px;
    height: 24px;
    border: 1px solid #cccccc;
    border-left: none;
    background: #fcfcfc url(../images/timg_04.jpg) no-repeat center;

    float: right;
}
ul #sy{
    border-left: none;
    float: left;
    margin-left: 70px;

}
.ul1 li{
    width: 104px;
    float: left;
    text-align: center;
    border-left: solid 1px #4b7b6b;


}
ul #butt01{
    text-align: right;
}
.ul1 li a{
    color: #4b7b6b;
}
/*大图*/
#bn{
    width: 1024px;
    height: 326px;
    margin: 0 auto;
    background: #c27032;
}
/*公司新闻*/
#news{
    width: 1024px;
    height: 269px;
    background:#c27032 ;
    margin: 0 auto;
}
#news-1{
    width: 500px;
    height: 269px;

    float: left;
}
#news-1 h2{

    font-size: 18px;
    /*可以调整高度误差*/
    line-height: 18px;
    padding: 36px 0 0 22px;
    margin-bottom: 23px;
}
#news-2{
    width: 240px;
    height: 240px;
    background: #f098fc;
    float: left;
}

#news-3{
    width: 260px;
    height: 240px;
    background: #302f7b;
    float: left;
}
.news_list{

    padding-left: 21px;

}
.news_list li{
    width: 438px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    background: url("../images/timg_06_03.jpg") no-repeat center left;
    padding-left: 13px;

}
.news_list li a{
   font-size: 12px;
    color: #585858;
    float: left;

}
.news_list li span{ color: #a4a4a4;float: right}