2-2 百度首页

etzt

2019-10-25

百度首页

2-2 百度首页

上图：当前webstorm的文件目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--头部-->
    <div id="header">
    <!--javascript:void(0) 等于#-->
        <a href="#">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">登录</a>
        <a href="#">设置</a>
        <a href="#" class="more-product">更多产品</a>
    </div>
    <!--主要内容-->
    <div id="content">
        <div class="logo">
            <img src="images/logo_white_ee663702.png">
        </div>

        <div class="search">
            <input type="text" value="">
            <a href="#">百度一下</a>
        </div>
        <div class="dom">
            <img src="images/d_1.png">
            <img src="images/d_2.png">
            <img src="images/d_3.png">
            <img src="images/d_4.png">
        </div>
        <div class="dom">
            <img src="images/d_5.png">
            <img src="images/d_6.png">
            <img src="images/d_7.png">
            <img src="images/d_8.png">
        </div>
    </div>
    <!--尾部-->
    <div id="footer">
        <p class="footer-top">
            <a href="#">把百度设为主页</a>
            <a href="#">关于百度</a>
            <a href="#">About Baidu</a>
        </p>
        <p class="footer-bottom">
            ?2019 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号  <a href="#">京公网安备11000002000001号</a>
            <img src="images/copy_rignt_24.png">
        </p>
    </div>

</body>
</html>

代码：index.html文件中的代码

/*所有标签*/
* {
    margin: 0;  /*外边距为0*/
    padding: 0; /*内边距为0*/
}

a{
    color: black;
}

body{
    font-size: 13px;
    background: url("../images/bg.jpg");
    background-size: cover;  /*背景图片拉伸*/
}

#header a{
    margin-right: 7px;
    font-size: 15px;
    font-weight: bolder;
    color: white;
}
/*复合属性*/
#header a.more-product {
    display: inline-block; /*改为行内-会计标签来修改宽度和高度*/
    background-color: #3ac0ff;
    color: white;
    width: 80px;
    height: 26px;
    text-align: center; /*垂直居中*/
    line-height: 26px; /*与height一样高，就是水平居中*/
    text-decoration: none; /*去掉下划线*/
    font-weight: normal;  /*不加粗*/
}

/*头部*/
#header{
    background-color: rgba(0,0,0,0.2);  /*透明背景*/
    text-align: right;  /*靠右*/
    margin: 0px 9px 30px 0px;  /*调整外边距*/
    height: 38px;
    line-height: 38px;  /*垂直居中*/
}

/*主要内容*/
#content{
    /*background-color: green;*/
}

#content .search{
    /*background-color: cornflowerblue;*/
    width: 600px;  /*设置宽度方便设置居中*/
    margin: 0 auto;  /*块级标签居中*/
}

#content .search input{
    width: 500px;
    height: 33px;
    padding: 5px;   /*防止输入的文字太贴近边框，设置其内边距*/
    box-sizing: border-box;   /*设置内边距会导致盒子变大，所以此处保持盒子大小不变，向内缩紧*/
}

#content .search input:focus{
    outline: none;  /*点击输入框的时候，会变色，此处将边框默认颜色取消*/
    border: 1px solid #3385ff;  /*设置新的颜色*/
}

#content .search{
    margin-bottom: 60px;  /*设置外边距下面，与下面的标签保持间距*/
}

#content .search a{
    display: inline-block; /*改为行内-会计标签来修改宽度和高度*/
    background-color: #3ac0ff;
    color: white;
    width: 100px;
    height: 33px;
    text-align: center; /*垂直居中*/
    line-height: 33px; /*与height一样高，就是水平居中*/
    text-decoration: none; /*去掉下划线*/
    font-weight: normal;  /*不加粗*/
    float: right;  /*浮动在父标签的右边*/
}

#content .logo{
    text-align: center;
}

#content .logo img{
    width: 270px;
    height: 129px;
}

#content .dom{

    text-align: center;
    margin: 5px;
}

#content .dom img:hover{
    /*设置不透明度*/
    opacity: 0.7;  /*将鼠标放在图标的焦点时，图片会有一定透明效果*/
}

#content .dom img{
    width: 150px;
}

/*尾部*/
#footer{
    margin-top: 120px;
    text-align: center;
}

#footer p{
    margin-top: 10px;
}
#footer p.footer-top a{
    margin: 0 5px;
}

代码：index.css文件中的设计代码

2-2 百度首页

上图：设计完成的百度首页效果

etzt

0 关注 0 粉丝 0 动态

关注关注

安科网

2-2 百度首页

etzt

etzt

etzt