1：B/S架构

B是browser（浏览器）用户使用的所有客户端，我们都可以把它视为浏览器（部分手机app，小程序）

S是server（服务器）浏览器发出请求，通过http等互联网协议，发送至S端服务器，S端把网页文件发送至前端，B端浏览器收到文件后，浏览器解析成图形页面，可供用户操作

<!DOCTYPE html>
<html>
<head>
<!--头部，页面背景上的设置-->
<meta charset="utf-8">
<!--meta元标签-->
<!--charset编码格式-->
<!--GB-2312国家标准
GBK国家标注扩展包-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello,World!</title>
</head>
<body>
<div>无实意标签</div>
<p>段落标签</p>
<span>无实意标签</span>
<img src=https://img1.baidu.com/it/u=1156314614,1567801075&fm=26&fmt=auto

<ul type="cricle">
<!--无序列表-->
<li>aaaa</li>
</ul>
<ol type="I"> <!--"I"大写是希腊数字-->
<!--有序列表-->
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ol>

<input type="text" name="">
<input type="number" name="">
<input type="password" name="">
<!--单选框-->
性别:
<input type="radio" name="gender">男
<input type="radio" name="gender">女<br>
<input type="checkbox" name="">
<a href="http://www.baidu.com">百度一下</a>

</body>
</html>

css基础

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--charset是属性,=右边是属性值-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- css层叠样式表：特点：1.继承性 2.层叠性，可被覆盖-->
<link rel="stylesheet" type="text/css" href="css/main.css"> <!-- 外部样式表、链入样式表 -->
<style type="text/css"> /*头部样式表*/
ul{
background-color: lightgreen;
}
li{
color: blue;
}
div{background: lightgreen;}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: lightblue;"> <!--行内样式表，极差，不允许使用-->

</div>
<ul>
<li>aaaaa</li>
<li class="xiaoHong">bbbbb</li>
<li id="xiaoMing">ccccc</li> <!-- 'class'选择器可以名字重复，'id'选择器不可以 -->
<li class="xiaoHong">ddddd</li>
<li>eeeee</li>
</ul>

</body>
</html>

li{
color: red;
}
/*标签选择器*/
#xiaoMing{
color: pink;
}
/*id选择器，id唯一且不重复*/
.xiaoHong{;
color: lightblue;
}
/*class类名选择器*/
/*css优先级*/
/*1.后来者居上，越往后越说的算。2.行内样式>头部样式>=外部样式 3.越精确越说了算那么则id>class>标签
4. !important优先级最高，但是不到最迫不得已的时候不要用 */

 

命名法

驼峰命名法

xiaoMing小驼峰命名法 XiaoMing大驼峰命名法

下划线命名法 xiao_ming

xiao-ming

表现与结构分离

表现：css

结构：html

css常用属性

width: 高度

height：高度

background：背景

background-color：背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width:500px;
height:500px;
/*background: lightblue;*/
/*background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.94fd04f520b76695e66c161548995365?rik=raldMwMbVLnGLg&;riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2fd55c343251b3aa93c16147e1e2bbc2d662c47c98.jpg&ehk=8w%2ftqu%2bjOzfwG2lTJ4n%2bYZzjT925oNXT4ux3D%2ffrDGo%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;*/ /*平铺 background-repeat-x横着平铺，而y则是竖着平铺*/

background: url(https://tse1-mm.cn.bing.net/th/id/R-C.94fd04f520b76695e66c161548995365?rik=raldMwMbVLnGLg&;riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2fd55c343251b3aa93c16147e1e2bbc2d662c47c98.jpg&ehk=8w%2ftqu%2bjOzfwG2lTJ4n%2bYZzjT925oNXT4ux3D%2ffrDGo%3d&risl=&pid=ImgRaw&r=0) no-repeat;

color: red;
font-size: 20px;
font-weight: 700; /*字体大小*/
text-indent: 40px;
}

#div2{
width: 300px;
height: 50px;
background: lightblue;
text-align: center; /*文字居中*/
line-height: 50px; /*单行垂直居中*/
}
}
</style>
</head>
<body>
<div id="div1">
时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</div>
<div id="div2">
滕王高阁临江渚
</div>
</body>
</html>

 

盒模型

margin: 50px 0 0 50px; /顺序是上右下左/

 

/margin-left: 50px; margin-top: 50px;/ /margin:外边距，padding内边距，border边框，bottom底部/

 

/margin: 0 50px 0; 上0，左右50 下0/

/margin: 20px 30px; 上下20，左右30/

/margin: 10px; 上下左右都是10/

 

auto代表的是左右

border-top-left-radius: 代表左上角；

border-bottom-right-radius: 代表右下角；

 

行快属性.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
width:300px;
height:300px;
background:lightblue;
display: inline-block; <!-- display: inline-block ;用来共处一行-->
}
span{
width: 300px;
height: 300px;
background: lightgreen; ;
display: inline-block;
}
input{
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<div>我是div</div><div>我是div</div>
<span>我是span</span><span>我是span</span>

<input type="text" name="">
<input type="text" name="">
</body>
</html>

盒模型.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width: 500px;
height: 500px;
background: lightblue;
overflow: hidden;
/*border-width: 5px;
border-color: red;
border-style: solid;*/
border: 5px solid red;
/*dashed,dottde,
/*border-radius: 50%;*/
border-top-left-radius: 50%; /*左上角*/
border-bottom-right-radius: 50% ; /*右下角*/
border-top-right-radius: 50%
}

#div2{
width: 100px;
height: 100px;
background: lightgreen;
/*margin: 50px 0 0 50px;*/ /*顺序是上右下左*/
/*margin-left: 50px;
margin-top: 50px;*/
/*margin:外边距，padding内边距，border边框，bottom底部*/
/*margin: 0 50px 0; 上0，左右50 下0*/
/*margin: 20px 30px; 上下20，左右30*/
/*margin: 10px; 上下左右都是10*/
margin: 100px auto 0;
}
#div3{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-right: 50px solid rgba(0, 0, 0, 0);
border-left: 50px solid lightblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">

</div>
<span>zhushilong</span>
</div>
<div id="div3">


</div>

</body>
</html>

 

浮动.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#father{
width: 700px;
height: 30px;
background: lightblue;
margin: 100px auto 0;
}
#son1{
width: 500px;
height: 30px;
background: lightcoral;
/*display: inline-block;*/
float: left;
}
#son2{
width: 100px;
height: 100%;
background: lightgreen;
/*display: inline-block;*/
float: left;
}
</style>
</head>
<body>
<!-- 浮动的定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘框为止。
文档流
-->
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>

</body>
</html>

 

定位

 

固定定位：相对于浏览器窗口定位，翻页时位置不变。

相对定位：相对与原本文档流中的位置定位，仍然占据原位置。

绝对定位：相对于离他最近的已定位父级进行定位，一直找到浏览器窗口为止。

a标签可以跳转

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{
height: 10000px;
}
div{
width: 100px;
height: 100px;
}
#guDing{
background: lightblue;
position: fixed; /*固定*/
left: 500px;
top: 200px;
}
#xiangDui{
background: lightcoral;
position: relative; /*相对*/
left: 100px;
top: 100px;
}
#jueDui{
background: lightgreen;
position: absolute; /*绝对*/
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<!-- <div style="background: yellow;"></div> -->
<div id="guDing"></div>
<div id="xiangDui"></div>
<div id="jueDui"></div>
三种定位
固定定位：相对于浏览器窗口定位，翻页时位置不变。
相对定位：相对与原本文档流中的位置定位，仍然占据原位置。
绝对定位：相对于离他最近的已定位父级进行定位，一直找到浏览器窗口为止。

嵌套规则
块里面可以放行内
行内里面不可以放块

</body>
</html>

百度

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
input{
margin: 0;
padding: 0;
}
#header{
min-width: 800px;
position: relative;
}
#nav{
width: 600px;
height: 30px;
/*background: lightblue;*/
/*float: left;*/
margin: 0;
padding: 0;
font-size: 14px;
list-style: none; /*去黑点*/
display: flex;
justify-content: space-around; /*均匀分布*/
line-height: 30px;
}
#nav>li{
/*display: inline-block;*/
/*margin: 0 19px;*/

} /*>是子代选择器，而空格是后代选择器*/
#nav a{
color: #000;
text-decoration: none;
}
#topRight{
width: 140px;
height: 30px;
/*background: lightgreen;*/
/*float: right;*/
position: absolute;
right: 10px;
top: 5px;
display: flex;
justify-content: space-between;
}
#topRight>input{
background: #fff;
border: 0;
font-size: 13px;
height: 24px;
cursor: pointer;
}
#topRight>#login{
width: 48px;
background: #38f;
color: #fff;
border-radius: 6px;
}
/*权值、权重 行内样式1000则id100、class10、tag1*/

#center{
width: 600px;
height: 250px;
margin: 150px auto 0;
/*background: lightgreen;*/
}
#imgBox{
width: 220px;
margin: 0 auto;
/*background: lightcoral;*/
}
#imgBox>img{
width: 100%;
}
#iptBox{
width: 100%;
height: 44px;
/*background: lightblue;*/
border: 1px solid lightgray;
border-radius: 10px;
}
#iptBox>input[type='text']/*属性选择器*/{
width: 500px;
height: 100%;
float: left; /*去缝隙*/
border: 0;
border-radius: 10px 0 0 10px;
}
#iptBox>input[type='button']{
width: 100px;
height: 100%;
float: left;
border: 0;
background: #38f;
color: #fff;
/*border-top-right-radius: 10px;*/
border-radius: 0 10px 10px 0;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="">新闻</a></li>
<li><a href="">hao123</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 id="topRight">
<input type="button" name=""value="设置">
<input type="button" id="login" name=""value="登录">
</div>
</div>
<div id="center">
<div id="imgBox">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</div>
<div id="iptBox">
<input type="text" name="">
<input type="button" name=""value="百度一下">
</div>
</div>
</body>
</html>

 

 

 

更多文章请关注《万象专栏》