前端(四)
程序员文章站
2024-02-11 13:33:10
前端之常用标签的使用、边界圆角、精灵图以及盒模型的布局 前言 上篇博客介绍了组合选择器,包括四种,分别是群组选择器、后代(子代)选择器、兄弟(相邻选择器)及交集选择器;a 标签的四大伪类选择器,a:link、a:hover、a:active、a:visited,其中 hover 和 active 也 ......
前端之常用标签的使用、边界圆角、精灵图以及盒模型的布局
前言
上篇博客介绍了组合选择器,包括四种,分别是群组选择器、后代(子代)选择器、兄弟(相邻选择器)及交集选择器;a 标签的四大伪类选择器,a:link、a:hover、a:active、a:visited,其中 hover 和 active 也可以用于其他标签,索引选择器包括三种
<!-- 先位置后类型 --> div:nth-child(1) <!-- 先类型后位置 --> div:nth-of-type(1) <!-- 取反,先找到有 abc 和 div 类的标签,然后取反--> .div:not([abc])
最后介绍了最最重要的盒模型,盒模型由四部分组成由内到外分别是:content+padding+border+margin,其中 content+padding+border 参与盒子显示,margin 参与盒子布局。
常用标签的使用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>常用标签的使用</title> <!-- seo --> <!-- <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> --> <!-- <meta name="description" content="80字以内的一段话,与网站内容相关"> --> <!-- 移动适配 --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> --> <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico"> <style type="text/css"> .img { /*根据需求,是指定高还是指定宽,设置一个,另一个会等比缩放*/ /*width: 200px;*/ height: 100px; } /*四个伪类*/ /*reset操作*/ a { color: #333; text-decoration: none; } /*ul的reset操作*/ ul { margin: 0; padding: 0; list-style: none; /*margin-left: 40px;*/ } </style> </head> <body> <!-- 1.设置锚点: 锚点名page_top --> <a href="" name="page_top"></a> <img class="img" src="./img/timg.jpg" alt=""> <a href="00_复习预习.html">前往00页面</a> <!-- 前往本页面中个某个位置: top => 锚点 --> <!-- 1.设置锚点 2.设置前往锚点的a转跳 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 通配标签页可以设置锚点 --> <!-- <a href="" name="t_123"></a> --> <div id="t_123">123</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 2.设置前往锚点的a转跳: #锚点名 --> <a href="#page_top">top</a> <a href="#t_123">123</a> <a href="00_复习预习.html#md">前往锚点</a> </body> </html>
边界圆角
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边界圆角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } .box { /*边界圆角*/ /*百分比控制*/ /*border-radius: 50%;*/ /*实际像素控制*/ /*border-radius: 20px;*/ /*横纵分离 横 / 纵*/ /*border-radius: 20px / 50%;*/ /*左上为第一个角, 顺时针赋值, 无值找对角*/ /*左上横30px 右上横100px 右下横=左上横 左下横=右上横, 四角纵向全是50%*/ /*border-radius: 30px 100px / 50%;*/ /*单独设置时, 横向 纵向*/ /*border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%;*/ border-radius: 50% 50% 0 0 / 100% 100% 0 0; } </style> </head> <body> <div class="box"></div> </body> </html>
背景样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>背景样式</title> <style type="text/css"> .box, .wrap { width: 200px; height: 200px; background-color: orange; } .wrap { /*图片过大会显示不全*/ background-image: url('img/timg.jpg'); /*规定背景图片显示尺寸*/ background-size: 200px 200px; } .box { /*图片过小会平铺*/ background-image: url('img/123.png'); /*平铺:repeat-x | repeat-y | repeat | no-repeat*/ background-repeat: no-repeat; /*位置(定位): 可以写具体数值,也可以写位置单词*/ /*background-position: 10px center;*/ /*background-position: right bottom;*/ /*background-position: center center;*/ /*设置一个值时,控制的是x轴,y轴取center*/ /*设置;两个值时,第一个值控制x,第二个值控制y*/ background-position: 10px 40px; /*整体设置*/ background: url('img/123.png') red no-repeat 50px 50px; } /*注: 实际开发中,资源图片大小一定要与显示区域等大*/ </style> </head> <body> <img src="img/123.png" alt=""> <div class="box"></div> <div class="wrap"></div> </body> </html>
精灵图
<!doctype html> <html> <head> <meta charset="utf-8"> <title>精灵图</title> <style type="text/css"> .box { width: 500px; height: 100px; /*height: 300px;*/ border: 5px solid black; } .box { background-image: url('img/bg.png'); background-position: 0 -150px; } .box:hover { cursor: pointer; background-position: 0 -250px; } /*1.显示区域一定要与精灵图目标小图大小一致*/ /*2.通过背景图片定位方式将目标小图移至显示位置*/ </style> <style type="text/css"> .lt1 { width: 155px; height: 48px; background: url('img/bg.png') no-repeat 0 0; } .lt1:hover { cursor: pointer; background: url('img/bg.png') no-repeat 0 -48px; } </style> </head> <body> <!-- 精灵图: 各种小图拼接起来的一张大图 --> <!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) --> <div class="box"></div> <div class="lt1"></div> </body> </html>
盒模型布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title>盒模型布局细节</title> <style type="text/css"> .sup { width: 500px; height: 100px; background: orange; } .sub { width: 50px; height: 50px; background-color: red; } /*sub在sup中 水平居中*/ .sub { /*margin-left: auto; margin-right: auto;*/ margin: 0 auto; } /*垂直居中*/ .sub { margin-top: 24px; } /*margin坑: 父子联动*/ /*.box { width: 1px; height: 1px; }*/ /*解决一: 设置border-top*/ .sup { /*border-top: 1px solid transparent; height: 99px;*/ } /*解决二: 设置padding-top*/ .sup { padding-top: 1px; height: 99px; } /*margin坑: 上兄弟margin-bottom与下兄弟margin-top重合, 取大值*/ /*解决方案: 只设置一个,建议设置下兄弟margin-top*/ /*margin布局: 下盒子的垂直起始位置决定于同结构中上盒子的margin结束位置;水平起始位置就是父级content最左侧*/ </style> </head> <body> <div class="sup"> <!-- <div class="box"></div> --> <div class="sub"></div> </div> </body> </html>
上一篇: 决策树算法 ID3 C4.5 CART
下一篇: jzoj 5842. a
推荐阅读
-
前端(四)
-
2018HDU多校赛第四场Problem E. Matrix from Arrays
-
lightOJ 1161 Extreme GCD(素数四元组)[容斥原理]
-
Android编程中的四大基本组件与生命周期详解
-
四川大学难考还是重庆大学比较难?四川大学好还是重庆大学好?
-
前端构建 Less入门(CSS预处理器)
-
前端编码风格规范之 HTML 规范_html/css_WEB-ITnose
-
30天了解30种技术系列---(4)Node.js神级开发工具-WebStorm 博客分类: 30天了解30种技术 webstorm前端开发web开发node.jshtml5
-
世界十大毒蜘蛛 第四名叫黑寡妇,第一极具攻击性
-
C#使用正则表达式隐藏手机号中间四位为*