CSS装饰+选择器拓展

装饰

<style>img {vertical-align: bottom;}</style>
</head>
<body><img src="./images/1.jpg" alt="">老师真帅ayfc老师真帅ayfc老师真帅ayfc
</body>

问题一

<style>input {height: 50px;/* 自动内减 */box-sizing: border-box;/* 方法一：设置垂直对齐方式 *//* vertical-align: bottom; *//* 方法二：设置浮动 */float: left;}</style>
</head>
<body><input type="text"><input type="button" value="搜索">
</body>
</html>

问题二

 <style>img {vertical-align: bottom;}</style>
</head>
<body><img src="./images/1.jpg" alt=""><input type="text">
</body>

对齐

问题三

<style>.father {width: 400px;height: 400px;background-color: pink;}input {vertical-align: top;}</style>
</head>
<body><div class="father"><input type="text"></div>
</body>

问题四

<style>.father {width: 400px;background-color: pink;}img {/* 解决方法一：改变img标签的垂直对齐方式不为baseline即可 *//* vertical-align: bottom; *//* 解决方法二：设置img转换成块级元素 */display: block;}</style>
</head>
<body><div class="father"><img src="./images/1.jpg" alt=""></div>
</body>

问题5

<style>.father {width: 600px;height: 600px;background-color: pink;line-height: 600px;}img {vertical-align: middle;}</style>
</head>
<body><div class="father"><img src="./images/1.jpg" alt=""></div>
</body>

<style>.box {width: 400px;height: 400px;background-color: pink;/* 光标类型 */cursor: move;}</style>
</head>
<body><div class="box"></div><a href="#">我是一个a标签</a><span>我是span</span>
</body>

<style>.box {width: 400px;height: 400px;background-color: pink;/* 边框圆角 *//* border-radius: 30px; *//* border-radius: 30px 50px; *//* border-radius: 30px 50px 100px; */border-radius: 30px 50px 100px 150px;}</style>
</head>
<body><div class="box"></div>
</body>

数字为半径的⚪

 <style>/* 画一个正圆 */.one {/* 1、盒子必须是正方形 */width: 300px;height: 300px;/* 2、设置边框圆角为盒子宽高的一半 *//* border-radius: 150px; */border-radius: 50%;background-color: orange;/* 圆下边间隙 */margin-bottom: 20px;}/* 画一个胶囊按钮 */.two {/* 1、盒子要求是长方形 */width: 300px;height: 100px;/* 2、设置边框圆角为盒子高度的一半 */border-radius: 50px;background-color: purple;margin-bottom: 20px;text-align: center;line-height: 100px;color: #fff;font-size: 20px;}.three {/* 1、盒子要求是长方形 */width: 300px;height: 100px;/* 2、设置边框圆角为盒子高度的一半 */border-radius: 50px;border: 1px solid orange;text-align: center;line-height: 100px;font-size: 20px ;color: orange;}</style>
</head>
<body><div class="one"></div><div class="two">老师真帅</div><div class="three">老师真帅</div>
</body>

<style>div {width: 300px;height: 300px;background-color: pink;/* 溢出部分显示效果 */overflow: auto;}</style>
</head>
<body><div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>

<style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;}.red {background-color: red;}.green {background-color: green;/* 方法一：隐身，但是占位置 *//* visibility: hidden; *//* 方法二：隐身，不占位置 */display: none;}.blue {background-color: blue;}</style>
</head>
<body><div class="red"></div><div class="green"></div><div class="blue"></div>
</body>

绿色隐身，不占位置

<style>.father {width: 400px;height: 400px;background-color: pink;}.son {width: 100px;height: 100px;background-color: blue;/* 默认隐藏 */display: none;}.father:hover .son {/* hove到father后让son元素显示 */display: block;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

把鼠标移入手机微金所出现二维码

<style>* {margin: 0;padding: 0;}/* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */.nav {height: 40px;border-bottom: 1px solid #ccc;}/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */ul {list-style: none;width: 1200px;margin: 0 auto;}ul li {float: left;width: 20%;height: 40px;border-right: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;text-align: center;line-height: 40px;}ul .last {border-right: none;}ul li a {/* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 *//* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */display: block;/* 宽度不设置块元素会默认占满一行 */height: 40px;text-decoration: none;color: #000;}ul li .app {position: relative;}ul li .app .code {/* 图片默认隐藏 */display: none;/* 子绝父相 */position: absolute;left: 50%;transform: translateX(-50%);/* 为了img标签不遮住a标签的主体内容 */top: 40px;border: 1px solid #ccc;}/* 当app这个a标签被hover之后，让code显示 */ul li .app:hover .code {display: block;}</style>
</head>
<body><!-- 导航 --><div class="nav"><ul><li><a href="#">我要投资</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 --><li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li><li class="last"><a href="#">个人中心</a></li></ul></div></body>

 <style>div {width: 400px;height: 400px;background-color: red ;/* 元素整体透明度 *//* opacity: 1; *//* opacity: 0; */opacity: .5;}</style>
</head>
<body><div><img src="./images/1.jpg" alt="">我是内容</div>
</body>

<style>table {width: 400px;height: 300px;border: 1px solid #000;/* 边框合并：border-collapse */border-collapse: collapse;}td,th {  /* 中间的td,th的线 */border: 1px solid #000;}</style>
</head>
<body><!--  border="1" width="400" height="300"cellspacing="0" --><table><caption><h3>前端与移动开发学员学习情况</h3></caption><thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>成绩</th></tr></thead><tbody><tr><td>1</td><td>小姐姐</td><td>女</td><td>100</td></tr><tr><td>2</td><td>小哥哥</td><td>男</td><td>100</td></tr><tr><td>3</td><td>大姐姐</td><td>女</td><td>100</td></tr></tbody><tfoot><tr><td colspan="2">总成绩</td><td colspan="2">300</td></tr></tfoot></table>
</body>

 <style>div {width: 0px;height: 0px;/* background-color: pink; *//* 方法一： *//* border-top: 100px solid skyblue;border-right: 100px solid yellow;border-bottom: 100px solid purple;border-left: 100px solid blue; *//* 方法二：transparent为透明关键词 */border: 100px solid transparent;border-bottom-color: blue;}</style>
</head>
<body><div></div>
</body>

       border-top: 100px  solid transparent;border-right: 100px  solid transparent;border-bottom: 100px  solid transparent;border-left: 100px solid blue;

调节bottom大小，可以改变三角形锐角，越大越为锐角。

选择器拓展

 <style>/* 选中a标签未访问过的状态 */a:link {color: red;}/* 选中a标签访问过之后的状态 */a:visited {color: yellow;}/* 选中鼠标悬停的状态 */a:hover {color: orange;}/* 选中鼠标按下的状态 */a:active {color: skyblue;}</style>
</head>
<body><a href="#">我是a标签</a>
</body>

<style>/* 选中input获取焦点的状态 */input:focus {background-color: #ccc;}</style>
</head>
<body><input type="text">
</body>

点击前

点击后

<style>/* 找到页面中的input，并且需要有type属性 */input[type] {/* background-color: pink; */}/* 找到页面中的input，并且需要type属性值为text */input[type="text"] {background-color: pink;}input[type="password"] {background-color: rgb(132, 218, 132);}</style>
</head>
<body>姓名：<input type="text"><br>密码：<input type="password">
</body>

CSS装饰+选择器拓展相关推荐

CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...
CSS初识- 选择器背景浮动盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
前端与移动开发-----CSS（emmet 语法+CSS 复合选择器+元素的显示模式）
css emmet 语法 -- 开发效率 emmet 的特点和作用:通过简写提高编码效率. emmet 生成 HTML 结构语法: emmet 语法快速生成 css 样式: 1,常用属性大多用英文单词 ...
css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
CSS继承选择器与包含选择器的比较
作者:sagahu@163.com 日期:2011-12-21 CSS继承选择器与包含选择器的作用很像,其类似点主要有: 继承选择器的子孙元素可以继承到祖先元素的某些样式:而包含选择器的子元素可以得到 ...

CSS装饰+选择器拓展

装饰

选择器拓展

CSS装饰+选择器拓展相关推荐

最新文章

热门文章