笔记2021.11.2(2)"/>
HTML前端笔记2021.11.2(2)
前端笔记
- 1.B/S架构
- 2.HTML标签
- 3.CSS基础
- 3.1 CSS常用属性.html 和 main.css
- 3.2命名法
- 4.行块属性
- 4.1块标签
- 4.2行内标签
- 4.3行内块标签
- 4.4具体代码
- 5.浮动
- 6.盒模型
- 7.浮动
- 实战百度页面
- 拉勾网实战
1.B/S架构
HTML前端笔记2021.11.2
2.HTML标签
HTML前端笔记2021.11.2
3.CSS基础
3.1 CSS常用属性.html 和 main.css
css常用属性.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 500px;height: 500px;/*background-color: lightblue;*//*background-image: url();*//* background-repeat: no-repeat;*//*平铺*//*background-repeat-y: no-repeat;*/background: url(=667924587,934013906&fm=26&fmt=auto) no-repeat;color: red;font-size: 20px;/*chrome默认字体16px，最小支持字体12px*/font-weight: 700;text-indent: 40px;line-height: 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>
main.css
li{color: red;
}
/*标签选择器*/#xiaoMing{color: pink;
}
/* # 代表id*/
/*id选择器,id唯一且不重复*/.xiaoHong{color: lightblue;
}
/*class类名选择器*/
/*css优先级*//*1.后来者居上,越往后说了算
2.行内样式>头部样式=外部样式
3.越精确越说了算id>class>标签
4.!important 优先级最最高,但是不到万不得已不要用*/3.2命名法
1.驼峰命名法
xiaoMing小驼峰命名法 XiaoMing大驼峰命名法2.下划线命名法
xiao-ming
表现与结构分离
表现:CSS
结构:HTML
4.行块属性
4.1块标签
div,ul,li,ol,h1-h6,p
可以设置宽高
不可以和别人共处一行
不设置宽度的情况下,默认宽度是100%
display:block;可以转换成块标签属性
4.2行内标签
span,strong,a
不可以设置宽高
可以和别人共处一行
其宽高由内容撑开
4.3行内块标签
img,input
可以设置宽高
可以和别人共处一行
display:inline-block;可以转换成行内块属性
4.4具体代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">div{width: 300px;height: 300px;background: lightblue;/* display: inline;/*转换成行内块标签*/display: inline-block;/*这样就可以设置成可以设置宽高的行内块标签*/}span{width: 300px;height: 300px;background: lightgreen;display: block;/*设置成块标签*/}input{width: 400px;height: 50px;}</style>
</head>
<body><div>我是div</div><div>我是div</div><span>我是span</span><span>我是span</span><input type="" name=""><input type="" name=""></body></html>
5.浮动
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#father{width: 700px;height: 30px;background: lightblue;margin: 100px auto 0;}#son1{width: 500px;height: 100%;background: lightcoral;/*display:inline-block;*/float: left;}#son2{width: 100px;height: 100%;background: lightgreen;/*display: inline-block;*/float: right;}</style>
</head>
<body>浮动的框可以向左或向右移动,直到它的边缘触碰到包含框或者另一个浮动框的边缘为止文档流div一个一个的往后排,<div id="father"><div id="son1"></div><div id="son2"></div><div id="son2"></div><div id="son2"></div></div>
</body>
</html>
6.盒模型
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 500px;height: 500px;background: lightyellow;overflow: hidden;/*浮动*//*margin是外边距*//*padding是内边距*//*边框是border*//* border-width: 5px;border-color: red;border-style: solid;*/border: 5px solid red; /*dashed,dotted,double*//*顺序也可以颠倒*//* border-radius: 255px;*//*加圆角*//*border-radius: 50%;*//*加圆角*/border-top-left-radius: 50%;border-bottom-right-radius: 50%;/*border-bottom-left-radius: 50%;*/}#div2{width: 100px;height: 100px;background: lightgreen;/*margin-left: 50px;*//*盒子往右走*//*margin-top: 50px;*//*盒子往下走*//*margin: 50px 0 0 50px;*//* margin: 0 50px 10px;*//*上0,左右50,下10*//*margin: 20px 30px;*//*上下20,左右30*//* margin: 10px;*//*上下左右都是10*/margin: 100px auto 0;/* margin-left: auto;margin-right: auto;*/}#div3{width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid yellow;border-left: 50px solid lightgreen;border-bottom: 50px solid rgba(0,0,0,0);/*rgb是三原色,a是指颜色透明度*/border-radius: 50%;margin: 100px auto 0;}#div4{width: 0px;height: 0px;border-top: 50px solid red;border-right: 50px solid yellow;border-left: 50px solid lightgreen;border-bottom: 50px solid rgba(0,0,0,0);margin: 100px auto 0;}</style>
</head>
<body>
<div id="div1"><div id="div2"></div><div id="div4"></div><span>aeiguday</span>
</div>
<div id="div3"></div></body>
</html>
7.浮动
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#father{width: 700px;height: 30px;background: lightblue;margin: 100px auto 0;}#son1{width: 500px;height: 100%;background: lightcoral;/*display:inline-block;*/float: left;}#son2{width: 100px;height: 100%;background: lightgreen;/*display: inline-block;*/float: right;}</style>
</head>
<body>浮动的框可以向左或向右移动,直到它的边缘触碰到包含框或者另一个浮动框的边缘为止文档流div一个一个的往后排,<div id="father"><div id="son1"></div><div id="son2"></div><div id="son2"></div><div id="son2"></div></div>
</body>
</html>
实战百度页面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">input{margin: 0;padding: 0;}#header{min-width: 800px;position: relative;}#nav{width: 600px;height: 30px;/* background: lightblue;*/margin: 0px;padding: 0px;font-size: 14px;list-style: none;/*去黑点*/display: flex;justify-content: space-around;/*上边两句是弹性布局 space-between*/line-height: 30px;/*因为高度是30px所以把字体行高也设置成30px就可以了*//* position: absolute;right: 80%;*//*margin: 0px;*//*display: inline-block; 设置行内块也可以去黑点同时*/}#nav>li{/*display: inline-block; */ margin: 0px 19px;}#nav a{color: #000;/*设置字体颜色*/text-decoration: none;/*去掉下划线*/}/*子代选择器*//*如果是空格就是后代选择器,*/#topRight{width: 140px;height: 30px;/* background: lightgreen;*/position: absolute;right: 10px;top: 3px;display: flex;justify-content: space-between;}#topRight>input{background: #fff;border: 0px;font-size: 13px;/*设置弹性布局*/height: 24px;cursor: pointer;/*是计算机中把鼠标指针的形状弄成一只伸出食指的手*/}#topRight>#login{width: 48px;background: #38f;color: #fff;border-radius: 6px;/*加圆角*/}#bav{width: 100%;height: 30px;left: 0px;bottom: 0px;background: lightblue;display: flex;/*并列全靠它*/line-height: 30px;list-style: none;position: fixed;justify-content: space-around;font-size: 14px;padding: 0px;border: 0px;margin: 0px;}#bav>li{/*display: inline-block; */ margin: 0px 19px;}#bav a{color: #000;/*设置字体颜色*/text-decoration: none;/*去掉下划线*/}#center{width: 600px;height: 600px;margin: 45px auto;/*background: lightgreen;*/}#imgBox{width: 220px;margin: 0 auto;/* background: lightcoral;*/}#imgBox>img{width: 100%;}/*一定只设置宽度*/#iptBox{width: 100%;height: 44px;border: 1px solid lightgray;border-radius: 10px;/*border-radius: 10px;*//*background: lightblue;*/}#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-radius: 0 10px 10px 0;}/*属性选择器*/#resou{width: 600px;height: 30px;background: lightblue;margin-top: 20px;line-height: 30px;list-style: none;padding: 0px;}#resou>#zuo{height: 30px;float: left;text-decoration: none;margin: 0px;color: #000;}#resou>#you{height: 30px;float: right;text-decoration: none;margin: 0px;color: #000;}</style>
</head>
<body><div id="header"><ul id="nav"><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><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=".png"></div><!-- 图片 --><div id="iptBox"><input type="text" name=""><input type="button" name="" value="百度一下"></div><!-- 输入框 --><div id="resou"><a href="" id="zuo">百度热搜</a><a href="" id="you">换一换</a></div><!-- 热搜 --><ul id="resou"><li id="zuo"><a href="">阿杜的方式GV爱好</a></li><li id="you"><a href="">打一份的雨后的故事</a></li></ul><!-- 新闻 --><ul id="resou"><li id="zuo"><a href="">阿杜的方式GV爱好</a></li><li id="you"><a href="">打一份的雨后的故事</a></li></ul><ul id="resou"><li id="zuo"><a href="">阿杜的方式GV爱好</a></li><li id="you"><a href="">打一份的雨后的故事</a></li></ul><ul id="bav"><li><a href="">关于百度</a></li><li><a href="">about baidu</a></li><li><a href="">hello</a></li><li><a href="">nice</a></li><li><a href="">here</a></li></ul><!-- 新闻 --></div></body>
</html>
拉勾网实战
拉勾网.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/lagou.css">
</head>
<body><div id="header"><a href="" id="logo"><img src=".png"></a><div id="neirong"><div id="kuang"><div id="zuo"><div id="deng">登录</div><div id="yan">验证码</div></div><div id="zhong"><span>or</span></div><div id="you"></div></div></div></div></body>
</html>
lagou.css
body{min-width: 1024px;min-height: 100%;height: 609px;background: #f8f9fc;margin: 0px;
}
#header{position: relative;width: 100%;height: 360px;background: lightgreen;border: 0px;
}
#header>#logo{position: absolute;top: 74px;left: 20%;width: 300px;height: 30px;font-size: 30px;line-height: 30px;text-decoration: none;display: inline-block;
}
#neirong{position: absolute;background: #fff;left: 20%;width: 700px;height: 450px;top: 140px;
}
#neirong>#kuang{position: absolute;margin: 0 auto;left: 50px;top: 25px;width: 600px;height: 400px;
}
#neirong>#kuang>#zuo{left: 10px;top: 20px;background: lightblue;width: 300px;height: 350px;position: absolute;
}
#neirong>#kuang>#zuo>#deng{width: 100px;height: 30px;background: lightgreen;position: absolute;line-height: 30px;margin: 0 auto;
}
#neirong>#kuang>#zuo>#yan{width: 100px;height: 30px;right: 0px;background: lightcoral;position: absolute;line-height: 30px;margin: 0 auto;
}
#neirong>#kuang>#zhong{width: 0px;top: 20px;height: 350px;left:350px;border-left: 1px dashed lightgray;border-left-color: #000;position: absolute;
}
#neirong>#kuang>#zhong>span{position: absolute;left: -8px;top: 150px;background: #fff;}
#neirong>#kuang>#you{display: inline-block;position: absolute;top: 20px;right: 10px;background: lightblue;width: 200px;height: 350px;
}
这里注意css文件和html的文件位置
更多推荐
HTML前端笔记2021.11.2(2)
发布评论