java前端寒假总结7

hiyaaa

已于 2022-01-20 22:43:41 修改

阅读量286

点赞数

文章标签：前端 java css

于 2022-01-19 23:08:16 首次发布

本文链接：https://blog.csdn.net/qq_58309787/article/details/122591834

版权

今天跟着网课写了一个小网页的开头，了解了一点点网页设计的套路,了解了一点盒子模型

1.所有的网页都应该命名为index.html，以便搜索引擎查找

2.根据设计图写代码思路

布局：从上到下，从左到右，从外到内
CSS：浮动/display；盒子模型；文字样式

3.在写css时，应该先清除标签的默认格式

4.所有的标签可能添加内边距或border，都内减模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!--布局：从上到下，从左到右，从外到内-->
    <!--CSS：浮动/display；盒子模型；文字样式-->

    <!--头部header:负责头部区域样式，wrapper只负责版心效果-->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/夕阳.jpg" alt=""></a>
        </h1>

        <!--导航-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">导航</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
    </div>
</body>
</html>


* {/* 清除默认格式 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;/* 内减模式 */
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix::before,.clearfix::after {/* 清除浮动 */
    content: "";
    display: table;
 }
 .clearfix::after{
     clear: both;
 }
 /* .clearfix{
     *zoom:1;
 }
 */
body {
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

/* 头部 */
.header {
    height: 42px;
    background-color: pink;
    /*magin-top: 30px;
    magrgin-bottom: 30px; */
    margin: 30px auto;
}

h1 {
    float: left;
}

/* 导航 */
.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a {
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px soild #00a4ff; */
    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}