04-开发人员不的不懂得网页开发基础知识

2017-07-27 本文已影响13人孟轲666

1.一个有具体功能的完整网页，一般由三部分组成

HTML
网页具体内容和结构
CSS
网页的样式（美化网页最重要的一块）
JavaScript
网页的交互效果，比如用户对鼠标事件作出响应

学习网站：一个不错的网页学习网站

2.HTML常见标签

Snip20170727_6.png

演示：

Snip20170727_7.png

运行效果图

Snip20170727_9.png

3.CSS的编写格式是键值对形式的，比如：

color: red;
background-color: blue;
font-size: 20px;

4.CSS的三种书写形式

Snip20170727_11.png

5.CSS-选择器

Snip20170727_13.png

Snip20170727_14.png

Snip20170727_15.png

Snip20170727_16.png

Snip20170727_17.png

Snip20170727_18.png

Snip20170727_19.png

Snip20170727_20.png

Snip20170727_21.png

Snip20170727_22.png

Snip20170727_23.png

Snip20170727_25.png

Snip20170727_26.png

6.选择器优先级

Snip20170727_27.png

Snip20170727_29.png

7.HTML标签类型

Snip20170727_31.png

8.经常用到的属性

Snip20170727_38.png

PS.块级标签可以修改宽度和高度，但是行内标签不能修改宽度和高度，其宽度和高度有其内部的内容决定。但是inline-block既可以显示在同一行，也可以设置宽度和高度。

9.CSS属性：

Snip20170727_40.png

Snip20170727_43.png

Snip20170727_45.png

10.盒子模型

Snip20170727_49.png

Snip20170727_50.png

Snip20170727_51.png

如果是块级元素，可以通过 margin: auto;来设置其居中显示，如果不是块级元素而是行内元素，可以通过设置其父元素的text-align: center;使其居中显示。img是非块级元素。

12.百度实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>

<div class="content">
    <div class="logo">
        ![](Images/logo.png)
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#" class="active">贴吧</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><a href="#">文库</a></li>
            <li><a href="#">更多》》</a></li>

        </ul>
    </div>
    <div class="search">
        <input>

        <button>百度一下</button>
    </div>
</div>

</body>
</html>

index.css
body{
    background-image: url("../Images/bg.jpg");
    background-size: 100% 750px;
}
.content{
    background-color: cadetblue;
    width: 700px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    margin: 0 auto 0;
}
.content .logo{
    text-align: center;

}
.content .logo img{
    width: 270px;
    height: 129px;
}
.content .nav ul{
    list-style: none;
    text-align: center;
}
.content .nav ul li{
    display: inline;
}

.content .nav ul li a{
    color: white;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}
.content .nav ul li a.active{
    text-decoration: none;/*去除文字的下划线*/
}
.content .search{
    text-align: center;
}
.content .search input{
    width: 521px;
    height: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 18px;
    border-left: 1px solid #add;
    border-bottom: 1px solid #add;
    border-top: 1px solid #add;
}
.content .search button{
    width: 120px;
    height: 40px;
    font-size: 18px;
    margin: 0px;
}

效果图：

Snip20170728_56.png

13.CSS布局

Snip20170728_57.png

如果想要设置垂直居中，就得设置inline-height属性和父节点的高度一样。

摆脱标准流的两种方式：

Snip20170728_58.png

Snip20170728_59.png

子绝父相，就可设置子标签随着父标签的位置

13.前端框架--bootstrap

04-开发人员不的不懂得网页开发基础知识

猜你喜欢

热点阅读