码迷,mamicode.com
首页 > 其他好文 > 详细

2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

时间:2018-12-11 21:50:14      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:样式   auto   enc   垂直   宽高   res   imu   repeat-y   init   

一选择器复习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习预习</title>
</head>
<body>
复习预习
<!-- 1.组合选择器 -->
<!-- 群组选择器:
div, #div, .div {
该样式块同时控制多个(div, #div, .div)
}
每一个选择器位均可以为基础选择器中的一个(也可以为任意组合选择器)

h类的标签的reset操作(去除系统默认样式)
html, body, h1, h2, h3, h4, h5, h6 {
margin: 0
}
-->
<!-- 后代(子代)选择器:
// ①
<div class="sup">
<div class="sub"></div>
</div>
// ②
<div class="sup">
<div class="box">
<div class="sub"></div>
</div>
</div>
?
?
// *****可以控制①②
.sup .sub {
sup一定是sub的父代(不一定是父级,sub就是被sup直接嵌套)
}

// 只可以控制①
.sup > .sub {
sup一定是sub的父级
}

-->
<!-- 兄弟(相邻)选择器:
// ①
<div class="up"></div>
<div class="down"></div>
// ②
<div class="up"></div>
<div class="box"></div>
<div class="down"></div>

// 兄弟 控制①②
.up ~ .down {

}
// 相邻 控制①
.up + .down {

}
?
  -->
?
<!-- 交集选择器:
<div class="div box"></div>
<div class="div"></div>
<div></div>

div.div.box {
增强精确度(提升优先级)
}
body .div.box {
优先级只与选择器个数(种类)有关
}
?
-->
?
<!-- 2.伪类选择器 -->
<!-- a的四大伪类
a:link
a:hover
a:active
` a:visited
?
div:hover
div:active
-->
?
<!-- 索引
div:nth-child(1) 先位置后类型
?
div:nth-of-type(1) 先类型后位置
?
<div>
<p></p>
<span></span>
<span>目标</span>
<span></span>
</div>
-->
?
<!-- 取反:
// :not()
.div:not([abc])
?
<div class="div"></div>
<div class="div" abc></div>
<div class="div"></div>

-->
?
<!-- 盒模型:
?
content + padding + border + margin
?
盒子显示: content padding border
盒子布局: margin
  -->
?
<!-- 今日内容:
常用标签的使用: a | img | 列表标签 | meta | link
背景样式的使用(背景图片 精灵图) *****
边界圆角样式
盒子布局的总结(细节) *****
css样式的补充
w3c页面的书写
-->
<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>
<div id="md">锚点</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

二常用标签的使用(锚点)


<!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>

三radius边界圆角


<!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>

4背景样式(repeat平铺,background图片设置)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/**/
background: red;
}
.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: 20px 20px;*/
?
/*整体设置*/
background: url(‘img/123.png‘) orange no-repeat 60px 60px;
}
/*注: 实际开发中,资源图片大小一定要与显示区域等大*/
</style>
</head>
<body>
<!-- <img src="img/123.png" alt=""> -->
<div class="box id"></div>
<!-- <div class="wrap"></div> -->
</body>
</html>

5精灵图


<!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>

六盒模型布局细节(margin坑: 父子联动)


<!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>

六.1盒模型案例(nth-child)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型案例</title>
<style type="text/css">
/*reset*/
body, h1, ul {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
</style>
<style type="text/css">
.main {
width: 1210px;
height: 500px;
background: orange;
margin: 0 auto;
}
.nav {
width: 1210px;
margin: 0 auto;
height: 48px;
}
.nav_a {
/*a标签就支持宽高,并且可以嵌套其他标签*/
display: block;
height: 48px;
background: red
}
li:first-child .nav_a {
background: blue;
width: 155px;
}
li:nth-child(2) .nav_a {
background: pink;
width: 150px;
margin-left: 155px;
margin-top: -48px;
}
li:nth-child(3) .nav_a {
background: green;
width: 100px;
margin-left: 305px;
margin-top: -48px;
}
</style>
</head>
<body>
<!-- ul.nav>(li>a.nav_a)*7 -->
<ul class="nav">
<li>
<a class="nav_a" href=""></a>
</li>
<li>
<a class="nav_a" href=""></a>
</li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
</ul>
<div class="main"></div>
</body>
</html>

 

2018.12.7边界圆角redius,背景图设置,平铺,精灵图,盒子伪类索引

标签:样式   auto   enc   垂直   宽高   res   imu   repeat-y   init   

原文地址:https://www.cnblogs.com/jutao/p/10105056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!