dede双语网站,杭州软装设计公司哪家好,无锡做网站的企业,河北响应式网站建设平台一、伪元素
伪元素是 CSS 中的一种选择器#xff0c;用于选择某些特定的元素或元素的一部分#xff0c;而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式#xff0c;从而可以为元素的内容、框架或文本提供额外的样式#xff0c;增强网页的…一、伪元素
伪元素是 CSS 中的一种选择器用于选择某些特定的元素或元素的一部分而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式从而可以为元素的内容、框架或文本提供额外的样式增强网页的视觉效果和用户体验。 1、作业
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;margin: 0 auto; }div::before{content: [;margin-right: 20px;/* display: none; */}div::after{content: ];margin-left: 20px;/* display: none; */}div::before,div::after{transition: all .5s;opacity: 0;}div:hover::after,div:hover::before{opacity: 1;}/style
/head
bodydivCSS/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 24px;background-color: #f3f3f3;position: relative;margin: 100px auto; }/*before聊天框 after:三角形*/div::before{content: CSS伪类;width: 200px;height: 50px;position: absolute;top: -80px;left: 0;background-color:red;border-radius: 60px;text-align: center;line-height: normal;}div::after{content: ;position: absolute;top: -30px;left: 75px;width: 0;height: 0;border:20px solid transparent;border-top:20px solid red ;}div::after,div::before{opacity: 0;transition: all 1s;}div:hover::before,div:hover::after{opacity: 1;}/style
/head
bodydivCSS/div
/body
/html2、伪元素清除浮动
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;line-height: 200px;text-align: center;font-size: 30px;color: white;}.floatbox{background-color: blue;float: left;}.box{background-color: red;}#wrap::after{content: ;display:block;height: 0;visibility: hidden;clear: both;}/style
/head
bodydiv classfloatboxfloat/divdiv classbox/div
/body
/html二、BFC
BFC 的特点 独立性BFC 内部的元素不会影响外部元素外部元素也不会影响内部元素。这种独立性使得布局更加可控。
清除浮动当 BFC 中的元素浮动时它会包裹住这些浮动的元素避免其影响到外部的布局有助于解决清除浮动的问题。
高度计算BFC 可以计算其内部元素的高度避免父元素高度塌陷的问题。即使内部没有内容BFC 也会根据内部元素的布局计算出高度。 1、盒子放置特点
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 */overflow: hidden;}/style
/head
bodydivp这是一个p标签/pdiv stylewidth: 100px; height: 100px;p 这是第二个个p标签/p/div/div
/body
/html2、margin重叠
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 */overflow: hidden;}/style
/head
bodydivp这是一个p标签/pdiv stylewidth: 100px; height: 100px;p 这是第二个个p标签/p/div/div
/body
/html3、左边界接触
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 */overflow: hidden;}p{width: 100px;background-color: blue;overflow: hidden;}/style
/head
bodydivp这是一个p标签/pp 这是第二个个p标签/p/div
/body
/html4、不会和浮动盒子重叠
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{float: left;}#bfc-box{height: 300px;background-color: blue;overflow: hidden;}/style
/head
bodydiv idfloat-box/divdiv idbfc-box/div
/body
/html5、隔离容器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 *//* overflow: hidden; */}#float-box{color: red;/* display: flex; */}#bfc-box{height: 300px;background-color: blue;}/style
/head
bodydiv idfloat-boxp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/pp这是一个p标签/p/divdiv idbfc-box/div
/body
/html6、浮动元素高度计算
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 300px;/* height: 300px; */background-color: red;/* 触发BFCdiv内部区域会有bfc的特点 */overflow: hidden;}#bfc-box{background-color: blue;/* overflow: hidden; */}#bfc-box p{float: left;width: 100px;}/style
/head
bodydiv idbfc-boxp这是一个p标签/pp这是一个p标签/p/div
/body
/html7、三栏式布局
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#left,#right{width: 200px;height: 300px;}#left{float: left;background-color: yellow;}#right{float: right;background-color:green;}#main{/* width: 100%; *//* min-width: 300px; */height: 500px;background-color: greenyellow;/* 触发bfc */overflow: hidden;}/style
/head
bodydiv idleft/divdiv idright/divdiv idmain/div/body
/html三、IFC
IFC 的特点 行内布局IFC 主要影响行内元素及它们在文本流中的排列方式。行内元素在一行中布局它们的高度和宽度通常由内容决定而不会产生块级元素的特性。
行内上下文在 IFC 中行内元素可以在一行内与其他行内元素、文本、图像等交错显示但不会导致行高的变化除非用 line-height 等属性进行调整。
包含的元素在 IFC 内可以包含其他行内元素和块级元素但块级元素会触发上下文的变化通常会导致换行。
对齐与间距IFC 允许使用 vertical-align 和 text-align 等属性来控制元素的对齐和间距。 1、简介
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{border: 1px solid red;width: 400px;}/style
/head
bodydivspan这是span标签/spana href#百度一下/ainput typetextbutton登录/button/div
/body
/html2、font-size
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{border: 1px solid red;width: 400px;}span{}/style
/head
bodydiv整个ifc区域中只有文字spanspan中的 文字/span/div
/body
/html3、font-family
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{border: 1px solid red;width: 400px;/* line-height: 2px; */font-family:ca;font-size: 30px;/* line-height: 2px; *//* line-height: 1px; */line-height: 50px;font-size: 100px;}font-face {font-family: 徐静蕾字体;src: url(font/徐静蕾字体.fon);}font-face {font-family: ca;src: url(font/Catamaran-Bold.ttf);}span{}/style
/head
bodydivspan整个ifc/span /div
/body
/html4、line-height
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{border: 1px solid red;width: 400px;line-height: 2px;}span{/* line-height: 2;font-size的2倍 *//* line-height: 2px; */}/style
/head
bodydiv整个ifc区域中只有文字span中的 文字整个ifc区域中只有文字span中的 文字/div
/body
/html5、verrical-align
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{border: 1px solid red;line-height: 160px;/* line-height: 148px; */font-family: ca;}img,button,input{vertical-align: text-top;}img{/* height: 50px; */}span{}a{font-size: 140px;}font-face {font-family: ca;src: url(font/Catamaran-Bold.ttf);}/style
/head
bodydiv这是img src1.png alt这是a href#百度一下/ainput typetextbutton登录/button/div
/body
/html四、弹性布局
弹性布局Flexbox是一种用于设计网页布局的CSS布局模式它提供了一种更有效的方式来布置、对齐和分配空间给容器内的项目。弹性布局特别适用于需要在不同屏幕上进行响应式设计的场合。 1、介绍
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;font-size: 30px;display: inline-block ;}#second{display: inline-flex;}/style
/headbodydiv1/divdiv idsecond2/divdiv3/div
/body
/html2、子元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#second{display: inline-flex;/* width: 1200px; */height: 500px;border:1px solid red;font-size: 30px;display:flex;justify-content: center;flex-wrap: wrap;margin: 0 auto;}#second div{width: 200px;height: 100px;margin-left: 20px;margin-top: 20px;background-color: red;}/style
/headbodydiv idseconddiv/divdiv/divdiv/divdiv/divdiv/div/div/body
/html3、弹性容器-基础
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#list{width: 60%;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ justify-content: center;align-content: center;/* align-items: stretch; *//* align-items: center; */flex-wrap: wrap;}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}/style
/head
bodydiv idlistdiv styleheight: 150px;1/divdiv styleheight: 200px;2/divdiv styleheight: 300px;3/divdiv styleheight: 200px;4/div!-- div1/divdiv2/divdiv3/divdiv4/div --!-- div5/divdiv6/divdiv7/divdiv8/divdiv9/divdiv10/divdiv11/divdiv12/div --/div
/body
/html4、弹性容器-收缩比例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#list{width: 600px;margin: 0 auto;/* height: 1000px; */height: 1000px;background-color: #f3f3f3;display: flex;/* flex-direction: column-reverse; 改变主轴*/ /* justify-content: center; *//* align-content: center; *//* align-items: stretch; *//* align-items: center; *//* flex-wrap: wrap; */}#list div{width: 200px;height: 200px;background-color: tomato;/* line-height: 200px; */text-align: center;font-size: 30px;color: white;}/style
/head
bodydiv idlist!-- div styleheight: 150px;1/divdiv styleheight: 200px;2/divdiv styleheight: 300px;3/divdiv styleheight: 200px;4/div --div styleflex-shrink: 1;1/divdiv styleflex-shrink: 1;2/divdiv styleflex-shrink: 0;3/divdiv styleflex-shrink: 0;4/div!-- div5/divdiv6/divdiv7/divdiv8/divdiv9/divdiv10/divdiv11/divdiv12/div --/div
/body
/html五、jquery基础
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历和操作、事件处理、动画以及 Ajax 交互。 1、基础
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylebody {margin: 0;}header {height: 50px;background-color: #ccc;display: flex;}img {width: 10%;}ul {width: 90%;list-style: none;margin: 0;padding: 0;display: flex;}li {width: 20%;text-align: center;line-height: 50px;}.item {width: 300px;/* height: 400px; */padding: 10px;box-sizing: border-box;margin-bottom: 15px;border: 1px solid #ccc;/* flex-grow: 1; */margin-left: 15px;transition: all 0.5s;}.item img {width: 100%;}.price {color: darkred;font-size: 24px;font-weight: bold;}main {width: 80%;margin: 0 auto;border: 1px solid red;/* height: 2000px; */display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: flex-start;}#first{background-color: darkred;order: 1;}#last{background-color: darkblue;order: -1;}/style/headbodyheaderimg srcimages/logo.png alt /ulli第1项哈哈哈/lili第2项哈哈哈/lili第3项哈哈哈/lili第4项哈哈哈/lili第5项哈哈哈/li/ul/headermain idlistdiv classitem idfirstimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitemimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/divdiv classitem idlastimg srcimages/id1.jpg alt /p[蜗牛]不锈钢装饰物品/pp classprice 998/p/div/main/body
/html2、字体图标设计
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hreffont-awesome-4.7.0/css/font-awesome.min.cssstylea{color: red;}/style
/head
bodyi classfa fa-pencil-square-o aria-hiddentrue/ia href#i classfa fa-pencil-square-o aria-hiddentrue/i百度一下/a
/body
/html3、实战
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hreffont-awesome-4.7.0/css/font-awesome.min.cssstylebody{background-color: #f3f3f3;margin: 0;}header{height: 50px;background-color: black;display: flex;justify-content: space-between;position: fixed;top: 0;width: 100%;z-index: 2;}#logo{height: 50px;line-height: 50px;}#logo img{height: 30px;vertical-align: middle;}header ul{/* width: 90%;min-width: 700px; */margin: 0;padding: 0;list-style: none;display: flex;color: white;/* align-content: center; */}header ul li{line-height: 50px;/* padding:20px; */width: 100px;text-align: center;}#search-box{height: 500px;background-image: url(images/4.jpg);background-repeat: no-repeat;background-size: cover;display: flex;justify-content: center;align-content: center;flex-wrap: wrap;background-attachment: fixed;position: relative;}#search-box .search{width: 500px;height: 200px;background-color: blue;position: fixed;top: 150px;left: 0;right: 0;margin:auto;}nav{background-color: #fff;color: gray;height: 50px;}nav ul{height: 100%;width: 80%;list-style: none;margin: 0 auto;padding: 0;display: flex;align-content: center;flex-wrap: wrap;}nav ul li{flex-grow: 1;text-align: center;height: 25px;border-right: 1px solid #ccc;}.noborder{border: none;}main{width: 80%;margin: 0 auto;display: flex;flex-wrap: wrap;}main div{flex-grow: 1;width: 200px;height: 200px;background-color: darkred;line-height: 200px;font-size: 30px;color: white;text-align: center;margin-top: 15px;margin-left: 15px;}main div:hover{box-shadow: 0 0 10px 5px rgba(0,0,0);}#main{width: 100%;height: 2000px;position: relative;z-index: 1;background-color: #f3f3f3;}/style
/head
bodyheaderdiv idlogo img srcimages/logo.png alt/divullii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/lilii classfa fa-edit/i 在线编辑/li/ul/header!-- 搜索区域 --div idsearch-boxdiv classsearchinput typetextbutton登录/button/div/divdiv idmainnavullii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lilii classfa fa-edit/i网页模板/lili classnoborderi classfa fa-edit/i网页模板/li/ul/navmaindiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/main/div
/body
/html4、边框阴影
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 200px;background-color: red;margin: 200px auto;box-shadow: 0 0 3px 3px #aaa;}/style
/head
bodydiv/div
/body
/html5、边框固定
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#demo{width: 100%;height: 400px; margin: 0px auto;box-shadow: 0 0 3px 3px #aaa;background-image: url(images/4.jpg);background-size: cover;margin-bottom: 0px;background-attachment: fixed;}#demo2{width: 800px;height: 2300px; background-color: red;margin: 0 auto;background-image: url(images/id1.jpg);background-repeat: no-repeat;}/style
/head
bodydiv iddemo/divdiv iddemo2/div/body
/html本篇博客的内容【网页核心页面设计】已经结束。 若对你有些许帮助可以点赞、关注、评论支持下博主你的支持将是我前进路上最大的动力。
