尚硅谷前端视频总结(一)

1、reset.css清空浏览器默认样式

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

2、水平布局

左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距=父元素宽度

属性设置为auto，则将自动调整此属性宽度，否则优先调整右外边距

3、.clearfix

<!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>Document</title><link rel="stylesheet" href="./css/clearDeafult.css"><style>.box1{width: 200px;background-color: #bfc;}.box2{margin-top: 100px;width: 100px;height: 100px;background-color: red;float: left;}/* 同时解决高度塌陷和外边距重叠 */.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}</style>
</head>
<body><div class="box1 clearfix"><div class="box2"></div></div>
</body>
</html>

4、定位position

absolute绝对定位脱离文档流并参照上一个position属性不是static的元素，否则参照根元素body

relative相对定位不脱离文档流参照自己本身的位置进行偏移

fixed固定定位脱离文档流并参照浏览器视口进行定位

sticky粘滞定位实现吸顶效果兼容性不好

<!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>Document</title><style>.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: green;position: fixed;right: 50px;top: 50px;}.box3{width: 200px;height: 200px;background-color: blue;}.inner{width: 150px;height: 150px;background-color: orange;position: absolute;top: 10px;right: 10px;}.inner2{width: 100px;height: 100px;background-color: rgb(0, 26, 255);position: absolute;right:0;}</style>
</head>
<body><div class="box1"></div><div class="box2"><div class="inner"><div class="inner2"></div></div></div><div class="box3"></div>
</body>
</html>

5、背景图片

background-size

/* 关键字 */
background-size: cover
background-size: contain/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

background-clip

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;border-box
背景延伸至边框外沿（但是在边框下层）。
padding-box
背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box
背景被裁剪至内容区（content box）外沿。
text
背景被裁剪成文字的前景色

6、轮播图

<!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>Document</title><link rel="stylesheet" href="/demo1/css/clearDeafult.css"><style>img{width:300px;height: 300px;position: absolute;}.lunbo-box{position: relative;width: 300px;height: 300px;margin: 0 auto;}.item::before{content: '';border-radius:10px;width: 10px;height: 10px;background-color: gray;display: table;border: 2px solid gray;}.dont{position:absolute;list-style: none;z-index:999;bottom: 10px;left: 20px;}.item-active::before{background-color: white;background-clip: content-box;}.dont li{display: inline-block;}</style>
</head>
<body><div class="lunbo-box"><img src="./img/1.jpg" alt="" srcset=""><img src="./img/2.jpg" alt="" srcset=""><img src="./img/3.jpg" alt="" srcset=""><img src="./img/1.jpg" alt="" srcset=""><img src="./img/2.jpg" alt="" srcset=""><img src="./img/3.jpg" alt="" srcset=""><ul class="dont"><li><a href="javascript:void(0)"><div class="item" onclick="change(0)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(1)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(2)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(3)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(4)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(5)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(6)"></div></a></li></ul></div><script>let imgarray=document.querySelectorAll('img');let liarray=document.querySelectorAll('.item');var count=0;function change(id){count=id;if(count==6){count=0;}for(let [index,img] of imgarray.entries()){if(count!=index){img.style.zIndex=0;liarray[index].classList.remove('item-active');}}imgarray[count].style.zIndex=1;liarray[count].classList.add('item-active');count++;}setInterval(() => {change(count);}, 2000);</script>
</body>
</html>

7、综合运用——电影卡片

<!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>Document</title><link rel="stylesheet" href="./css/clearDeafult.css"><style>.outer{border-radius: 5px;margin: 2px auto;width: 240px;background-color: #232331;}.innerimg img{vertical-align: middle;width: 240px;height: 130px;}h1{color: white;margin-bottom: 6px;}.sum{color: rgba(230,233,240,.45);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;font-size: 12px;line-height: 20px;margin-bottom: 12px;}.innertext{padding:  8px 12px 12px 12px;}.item li{display: inline-block;}.item li div{text-align: center;line-height: 20px;font-size: 12px;width: 40px;height: 20px;padding: 2px;border-radius:20px;background-color:#343441 ;color:#7B746C ;margin-bottom: 12px;}.btn{height: 33px;width: 80px;background-image: url('./img/icon.png');background-size: 133px auto;background-position: 0 0;text-align: center;line-height: 28px;font-size: 12px;float: left;}a{text-decoration: none;color: white;}.btn:hover{background-position:0 -38px;border-color:#ffb821}.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}.icon{float: right;}.i1{display: inline-block;width: 16px;height: 16px;background-image: url(./img/icon.png);background-position: 0 -76px;background-size: 133px auto;}.i1:hover{background-position: -21px -76px;}.icon span{margin-left: 15px;}.i2{display: inline-block;width: 16px;height: 16px;background-image: url(./img/icon.png);background-position: -63px -76px;background-size: 133px auto;}.i2:hover{background-position:-84px -76px;}.bottom{position: relative;overflow: hidden;}.icon{position: absolute;right: 0;bottom: 5px;}h1 a:hover{color: #ff7221;}</style>
</head>
<body><div class="outer"><div class="innerimg"> <img src="./img/0.webp" alt=""> </div><div class="innertext clearfix"><h1><a href="#"> 雪中悍刀行</a></h1><ul class="item"><li><div> 2021</div></li><li><div> 古装</div></li><li><div> 张若昀</div></li><li><div> 武侠</div></li></ul><div class="sum"><span>简介：</span><span>为逃避做隋珠公主的驸马，“天下第一纨绔”的北椋世子徐凤年在父亲徐骁的安排下褪去锦衣华服，初进江湖，和马夫老黄苦中作乐，结识了众多江湖人士。三年游历归来，韬光养晦的徐凤年洗去浮尘，始终不想按照老爹铺好的人生轨道走，更不愿接手北椋，因为成为北椋王，就意味着要成为一个没有感情的孤家寡人。但当徐凤年雪中冠礼，得知一个个至亲离他而去，为他牺牲，经历人生的至暗时刻后，终于下定决心，要当一个和父亲完全不一样的北椋王，再难也不能妥协，遂苦学武艺，凭借赤子之心和勤学苦练，成为武者，而后率丫鬟姜泥、剑仙李淳罡等护卫，二进江湖，用悍刀闹得武林势力鸡飞狗跳，看似按老爹的套路下棋，实则踏雪独闯，力抗命运安排，渐渐培植了愿为自己效忠的武当、江南文坛、西楚、徽山轩辕等武林新势力，也通过种种线索发现母亲吴素之死的真相。漫天飞雪，徐凤年一人一刀一腔仇，用自己的身躯扛起北椋战旗，最终长成为北椋王合格的接班人。</span></div><div class="bottom"><div class="btn"><a href="#">立即观看</a></div><div class="icon"><a href="#"><span class="i1"></span></a><a href="#"><span class="i2"></span></a></div></div></div></div></body>
</html>

最近会分享一些我学前端的心得总结在我的网站点击这里

尚硅谷前端视频总结(一)相关推荐

尚硅谷前端视频总结（二）
尚硅谷前端视频总结(二) 原文链接动画animation CSS animation 属性是 animation-name,animation-duration, animation-timing- ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
尚硅谷前端HTML-CSS /HTML
尚硅谷前端HTML-CSS/HTML 软件分类系统软件应用软件游戏软件软件:客户端服务器. 客户端 –文字客户端 –图形化界面 C/S – 网页. B/S 优点不需要安装.无需更新跨平台 ...
前端 | （九）尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
总结尚硅谷的视频springboot视频
这16个章节也就讲个大概,更多内容需要你自己去学习. 第1章尚硅谷SpringBoot入门 P01.尚硅谷_SpringBoot_入门-课程简介 P02.尚硅谷_SpringBoot_入门-Sprin ...
尚硅谷Linux视频学习建议贴及linux全套视频，运维版本180G高质量视频教程免费下，linux教程
纯视频版本: 链接:https://pan.baidu.com/s/12lJCAn9MFssFEyx8Dmu5Eg 提取码:5fr7 含源码版本: 链接:https://pan.baidu.com/ ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
尚硅谷前端框架vue语法(二)
一.class绑定(会动态改变的class需要用到class绑定) 写法:class="xxx" xxx可以是字符串.对象.数组. 字符串写法适用于:类名不确定,要动态获取. ...

尚硅谷前端视频总结(一)

尚硅谷前端视频总结(一)

1、reset.css清空浏览器默认样式

2、水平布局

3、.clearfix

4、定位position

5、背景图片

6、轮播图

7、综合运用——电影卡片

尚硅谷前端视频总结(一)相关推荐

最新文章

热门文章