HTML+CSS宝典 实战项目
https://study.163.com/course/courseLearn.htm?courseId=1209391807#/learn/video?lessonId=1279310071&courseId=1209391807
https://study.163.com/course/introduction/1209391807.htm
1、选项卡
span 元素是行盒，浮动起来变成块盒，然后就能设置宽度，就能并排显示
文字行高为 2，文字大小设置为 13px，span 元素高度被撑起来了 26px
margin-bottom: -1px 选中的时候往下移动，多出一个像素，把外层元素 .switch-menu 的边框覆盖掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
*{padding:0;margin:0;}
/* common 通用样式 */
.left{
float: left;
}
.right{
float: right;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
/* 选项卡 style */
.account-container{
width: 300px;
height: 300px;
position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background-color: lightyellow;
line-height: 2;
color: #9b9b9b;
}
.account-container .switch-menu{
border-bottom: 1px solid #ececec;
font-size: 13px;
}
.account-container .switch-menu span{
width: 50%;
text-align: center;
cursor: pointer;
}
.account-container .switch-menu span.selected{
font-weight: bold;
color: #333;
border-bottom: 1px solid orange;
margin-bottom: -1px; /* 往下多出一个像素，把.switch-menu元素的边框覆盖掉 */
}
</style>
</head>
<body>
<div class="account-container">
<div class="switch-menu clearfix">
<span class="left selected">短信登录/注册</span>
<span class="right">密码登录</span>
</div>
</div>
</body>
</html>2、行块盒排列
列表项 li 元素并排排列，每个列表项 li 的高度是不固定的，有的列表项很高，有的没有那么不高，这种情况下不能用浮动
1. 设置设置 li 固定的宽度
2. 然后 li 元素为行块盒 inline-block 就能并排排列
3. 设置 ul 平均分布排列 text-align: justify，li 就分散对齐了，但该样式只会影响除最后一行的其它行
4. 最后一行用一个巧妙的办法，在 ul 最后加一个 li 元素，设置样式宽度 100%，
5. 默认是基线对齐，设置 li 顶端对齐 vertical-align: top
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行块盒排列</title>
<style>
ul,li,img.div,span{padding:0;margin:0;}
ul{
width: 360px;
margin: 0 auto;
background-color: #f7f7f7;
line-height: 1.5;
text-align: justify; /* 3.平均分布排列 */
}
li{
display: inline-block; /* 1.设置li为行块盒 */
width: 170px; /* 2.设置li固定的宽度 */
vertical-align: top; /* 5.设置顶端对齐 */
margin-bottom: 10px;
}
ul::after{ /* 4.ul最后一行是一个伪元素，不写高度 */
content: "";
width: 100%;
display: inline-block;
}
ul li .words{
font-size: 13px;
padding-top: 5px;
color: #999;
}
ul li .pic img{
width: 100%;
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<div class="pic ">
<img src="http://ruyic.com/blog/uploads/image/201904/155591911913470.png" alt="">
</div>
<div class="words">一行征雁向南飞，八只野猪入关来。野花夺朱非正色，异种草莽也称王。明月有情还顾我，清风不义不留郎。自古胡虏无长运，不信江山不姓唐。——花字号考生甲科第二名</div>
</li>
<li>
<div class="pic">
<img src="http://ruyic.com/blog/uploads/image/202311/169936708299182.jpg" alt="">
</div>
<div class="words">一行征燕向南飞</div>
</li>
<li>
<div class="pic">
<img src="http://ruyic.com/blog/uploads/image/202304/168231454539065.jpg" alt="">
</div>
<div class="words">两袖清风望复明</div>
</li>
<li>
<div class="pic">
<img src="http://ruyic.com/blog/uploads/image/202211/166982358120973.jpg" alt="">
</div>
<div class="words">秋天的柳树，叶儿已枯黄，可依然迎风轻拂这个世界，依然格外柔美，只是美中多了些秋天的伤感。她似乎要挽留征雁，又不忍开口，也不能开口。她只能自己捱过冬天，抽出新条，请春风为她梳妆打扮，再等雁归来</div>
</li>
</ul>
</body>
</html>3、切换登录方式
.container .change:hover{}
.pointer 元素默认是隐藏的，当鼠标移动到 .change 元素上时候在显示
.container .change:hover + .pointer{}
移动到 .change 上去的时候，要找到 .change 下一个兄弟元素，既 .pointer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换登录方式</title>
<style>
*{padding:0;margin:0;}
.container .hidden{
display: none;
}
.container{
height: 300px;
width: 300px;
position: relative;
overflow: hidden;
border: 1px solid #eee;
box-sizing: border-box;
}
.con-login,
.con-qrcode{
margin: 30px 10px 10px 10px;
height: 260px;
width: 280px;
background-color: lightgoldenrodyellow;
}
.change{
position: absolute;
top:10px;
right:10px;
}
.icon{
display: block;
width: 30px;
height: 30px;
cursor: pointer;
}
.icon-pc{
background:url("https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2024/duyiedu/icon-pc.png") no-repeat left top/100% 100%;
}
.icon-qrcode{
background:url("https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/2024/duyiedu/icon-qrcode.png") no-repeat left top/100% 100%;
}
.pointer{
position:absolute;top:10px;right:50px;
height:28px;line-height:28px;
border:1px solid rgba(66, 189, 86, .3);background-color:#f5faf9;
color: #666;
font-size: 13px;
padding: 0 5px;
border-radius: 4px;
}
.container .change:hover + .pointer{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="con-login"></div> <!-- 短信登录注册/密码登录 -->
<div class="con-qrcode hidden"></div> <!-- 扫码登录 -->
<div class="change">
<i class="icon icon-qrcode hidden"></i>
<i class="icon icon-pc"></i>
</div>
<div class="pointer hidden">扫码登录</div>
</div>
</body>
</html>4、banner
background: url() no-repeat left top/auto 100%
高度 100%，表示撑满
宽度不设置，auto 表示自动，它会按照高度成比例缩放
span 元素里面是否可以放div元素
搜索 span mdn
打开 https://developer.mozilla.org/...
找到 运行的内容 -> Phrasing content 短语内容
查看是否允许放 div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>banner</title>
<style>
*{margin:0;padding:0;}
/* 公共样式 */
.left{
float: left;
}
.right{
float: right;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.hidden{
display: none;
}
.container {
width: 950px;
min-width: 960px;
margin: 0 auto;
}
/* 公共样式 end */
.banner{
height: 304px;
background:#edf4ed url(http://ruyic.com/blog/uploads/image/202212/166989798079799.jpg ) no-repeat calc(50% - 305px) top/auto 100%;
}
.banner iframe{
width: 300px;
height: 300px;
}
.banner .slogan{
margin-top: 80px;
margin-right: 32px;
}
.banner .slogan .title{
font-size: 25px;
color: #111;
}
.banner .slogan .title span{
margin-left: 5px;
}
.banner .slogan .download{
margin-top: 25px;
}
.banner .slogan .download .btn{
display: inline-block;
line-height: 30px;
width: 115px;
height: 30px;
font-size: 12px;
color: #fff;
text-align: center;
background-color: #00b51d;
}
.banner .slogan .download .qrcode{
display: inline-block; /* 因为有边框必须要设置宽高，要设置宽高必须设置为行块盒 */
width: 28px;
height: 28px;
border: 1px solid #48aa0d;
margin-left: 5px;
vertical-align: bottom; /* 垂直对齐，bottom底端对齐，设置像素值调整也可以 */
position: relative;
}
.banner .slogan .download .qrcode img{
/* 图标自适应 */
width: 100%;
height: 100%;
}
.banner .slogan .download .qrcode .qrcode-img{
display: none;
position: absolute;
left: -1px; /* 包含块是填充盒，所以边框没有遮住，要设置负一 */
top: -1px;
width: 240px; /* 只设置宽度，高度自动增长 */
padding: 15px;
box-sizing: border-box; /* 设置padding后尺寸变了，所以设置该项 */
background: #fff;
font-size: 0;
}
.banner .slogan .download .qrcode .qrcode-img p{
color: #666;
font-size: 13px;
text-align: center;
line-height: 2.4;
}
/* 鼠标移到上面的时候，找到它的后代元素 */
.banner .slogan .download .qrcode:hover .qrcode-img{
display: block;
}
</style>
</head>
<body>
<div class="banner">
<div class="container clearfix">
<iframe src="./text3.html" frameborder="0" class="right"></iframe>
<div class="slogan right">
<h2 class="title">
豆瓣
<span>6.0</span>
</h2>
<div class="download">
<div class="btn">下载豆瓣 App</div>
<div href="javasript:void(0);" class="qrcode">
<img src="//ruyic.com/blog/uploads/image/201904/155591911913470.png"/>
<div class="qrcode-img">
<img src="//ruyic.com/blog/uploads/image/202411/173258829034739.jpg" />
<p>ios / Android 扫码直接登录</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>5、布局
.section:nth-child(2n) 当遇到双数的元素设置背景， 或者写关键词 even
2n 的意思是，n 从 0 开始自增，也就是从 0 开始乘 2
2 n
2 * 0 = 0
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
....
从 1 开始数元素（不是从0）
1. header
2. banner
3. section
4. ....
前面 .header 和 .banner 会影响后面的 .section
1. 因为 .section:nth-child(2n) 首先会查看前面 .section 选中的元素名称是 div
2. 所以会把前面 .header 和 .banner 拿来一起计算
3. 虽然改变样式，只会改变 .section 选中的元素
解决方法非常简单，把 .section 包起来就不会受到外面的影响了
<div class="header">1 header</div>
<div class="banner">2 banner</div>
<div
<div class="section">3 section</div>
<div class="section">4 section</div>
<div class="section">5 section</div>
<div class="section">6 section</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style>
*{padding:0;margin:0;}
/* 通用样式 */
.container{
width: 950px;
margin: 0 auto;
}
.section{
padding: 35px 0;
}
/* 布局样式 */
.header,
.banner{
padding: 35px 0;
border-bottom: 1px solid orange;
}
.section:nth-child(2n){
background: #f7f7f7;
}
</style>
</head>
<body>
<div class="header">1 header</div>
<div class="banner">2 banner</div>
<div class="section">
<div class="container">3 section</div>
</div>
<div class="section">
<div class="container">4 section</div>
</div>
<div class="section">
<div class="container">5 section</div>
</div>
<div class="section">
<div class="container">6 section</div>
</div>
</body>
</html>找到除第一个之外的 span 元素
span:nth-child(n + 2){}
n 从 0 开始，取 0 的时候是第二个元素，取 1 的时候是第三个元素
0 + 2 = 2
1 + 2 = 3
3n 意思是3的倍数，第3个、第6个、第9个应用样式
li:nth-child(3n){
margin-left: 0;
}
6、三栏布局
左边栏，左浮动
右边栏，右浮动
主区域自适应，激活 BFC 就会避开左右两边的浮动的盒子，然后撑满剩余区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style>
*{padding:0;margin:0;}
/* 通用样式 */
.container{
width: 950px;
margin: 0 auto;
}
.section{
padding: 35px 0;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
/* 布局样式 */
.section:nth-child(2n){
background: #f7f7f7;
}
.aside-left{
float: left;
width: 100px;
margin-right: 20px;
background-color: lightblue;
}
.aside-right{
float: right;
width: 265px;
margin-left: 30px;
background-color: lightcoral;
}
.main{
overflow: hidden;
zoom:1;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="section">
<div class="container clearfix">
<div class="aside-right">右边栏</div>
<div class="main">主区域</div>
</div>
</div>
<div class="section">
<div class="container clearfix">
<div class="aside-left">左边栏</div>
<div class="aside-right">右边栏</div>
<div class="main">主区域</div>
</div>
</div>
<div class="section">
<div class="container clearfix">
<div class="aside-left">左边栏</div>
<div class="aside-right">右边栏</div>
<div class="main">主区域</div>
</div>
</div>
</body>
</html>zoom: 1
表示缩放率，值越高就越大，它只是视觉上的效果越大，平时不怎么用
相当于手机上两根手指放大缩小
7、搜索框
边框用外面 div 实现
input 文本框回车就提交，有两种做方法
1. 表单元素 form 里面包 input 元素、button 提交按钮。这样回车就相当于点击了回车按钮
2. js 监控键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
@import "http://at.alicdn.com/t/c/font_3463133_5bvselrd2ss.css";
*{padding:0;margin:0;}
/* 重置文本框和按钮 */
input,
button{
border: none;
outline: none;
outline-offset: 0;
}
button{
background: initial; /* 重置按钮的背景 */
}
.search{
position:absolute;
top:50%;left:50%;transform:translate(-50%, -50%);
width: 270px;
height: 30px;
border: 1px solid #c3c3c3;
font-size: 0;
}
.search .txt::placeholder{
color: #ccc;
}
.search .txt{
width: 240px;
height: 20px;
font-size: 13px;
padding: 5px;
}
.search button{
position:absolute;
top:0;
right:0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #c3c3c3;
cursor: pointer;
}
.search button .iconfont{
font-size: 13px;
}
</style>
</head>
<body>
<div class="search">
<form>
<input type="text"
class="txt"
maxlength="60" size="12"
placeholder="书籍、电影、音乐、小组、小站、成员" autocomplete="off" name="q"
>
<button>
<i class="iconfont icon-sousuo4"></i>
</button>
</form>
</div>
</body>
</html>::placeholder 伪元素选择器
文本框、下拉列表的字体大小是 13.33333
8、播放字体图标居中
字体图标在 div 里面加了一个 before，我们需要设置 before 的样式
1. 设置绝对定位，然后宽高撑满，
2. 背景颜色半透明
3. 设置居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>播放字体图标居中</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3463133_ykqifpbf36.css" />
<style>
*{margin:0;padding:0;}
li{list-style: none;}
.video-main{
width: 840px;
}
.video-main li{
width: 250px;
display: inline-block;
vertical-align: top; /* 顶端对齐 */
margin-right: 36px;
}
.video-main li:nth-child(3n){ /* 选中3的倍数 */
margin: 0;
}
.video-main li img{
width: 100%;
display: block;
}
.video-main li .pic{
display: block;
position: relative;
}
.video-main li .pic::before{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .2);
color: #fff;
text-align: center;
/* line-height: calc(); */
font-size: 24px;
}
.video-main li .words{
font-size: 13px;
line-height: 1.5;
color:#333;
text-align: center;
}
</style>
</head>
<body>
<div class="video-main">
<ul>
<li>
<a href="javascript:void(0);" class="pic iconfont icon-bofang">
<img src="http://ruyic.com/blog/uploads/image/202211/166982358120973.jpg" alt="" />
</a>
<p class="words">江西广昌农家莲子</p>
</li>
<li>
<a href="javascript:void(0);" class="pic iconfont icon-bofang">
<img src="http://ruyic.com/blog/uploads/image/202506/174884932380084.jpg" alt="" />
</a>
<p class="words">江西广昌农家莲子</p>
</li>
<li>
<a href="javascript:void(0);" class="pic iconfont icon-bofang">
<img src="http://ruyic.com/blog/uploads/image/202212/166989798079799.jpg" alt="" />
</a>
<p class="words">江西广昌农家莲子</p>
</li>
</ul>
</div>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取高度，然后设置行高
var pic = document.querySelectorAll(".pic");
for(var i = 0; pic.length > i; i++){
console.log(pic[i].clientHeight);
pic[i].style.lineHeight = pic[i].clientHeight + "px";
}
});
</script>
Leave a comment
0 Comments.