发表于： 2019-08-06 13:28:52
1 879
已经有一段时间没写日报了 ，作业也没有提交 ，
这是第二篇日报 关于css
css 层叠样式表
行内css 写在 每个 html开始标签 里面 例子 <div style="height:100px; "></div>
内联css 写在
<head>
<style>
div{
height:100px;
}
</style>
</head>
css 外部样式表
在head里面
使用
<link rel="stylesheet" href="css/style.css">
1 盒模型框图
<style>
.box {
width: 262px;
height: 262px;
border: 2px dashed #ffffff;
background-color: fuchsia;
margin: 200px auto;
}
.div1 {
width: 220px;
height: 220px;
background-color: pink;
border: 1px solid #fff;
margin: 20px auto;
}
.div3 {
width: 170px;
height: 170px;
background-color: sandybrown;
border: 2px dashed #fff;
margin: 20px auto;
}
.div4 {
width: 134px;
height: 134px;
background-color: yellow;
border: 5px solid yellow;
margin: 10px auto;
}
.div5 {
width: 128px;
height: 128px;
background-color: green;
border: 1px dashed green;
margin: 2px auto;
}
.div6 {
width: 68px;
height: 68px;
background-color: fuchsia;
border: 1px solid #fff;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">
<div class="div3">
<div class="div4">
<div class="div5">
<div class="div6">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
2 包含选择器，通配符.，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>包含选择器 通配符*</title>
<style>
.box div {
/* 包含选择器 匹配所有父元素下一级的子元素 加权值 10+1=11 */
width: 100px;
height: 100px;
background-color: pink;
}
* {
/* 通配符 选择器 匹配所有标签 加权值为 0 通常只用在做一些小练习 */
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<span>样式区分</span>
<h1>this is a title</h1>
<h2>this is a title</h2>
<h3>this is a title</h3>
<h4>this is a title</h4>
<h5>this is a title</h5>
<h6>this is a title</h6>
</body>
</html>
3 背景 background 及伪元素 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 1200px;
background-color: skyblue;
margin: 0 auto;
}
div:nth-child(1){
height: 375px;
background-image: url('image/1.jpg')
}
div:nth-child(2){
height: 250px;
margin-bottom: 10px;
background: #f4c3cd url('image/298030.png') no-repeat 30px center ;
background-size: 5%;
}
div:nth-child(3){
margin-bottom: 10px;
height: 250px;
background: #f8d7de url('image/873122.png') no-repeat 30px center ;
background-size: 5%;
}
div:nth-child(4){
margin-bottom: 10px;
height: 250px;
background: #fde7ed url('image/1395500.png') no-repeat 30px center ;
background-size: 5%;
}
div:nth-child(5){
height: 280px;
background: #fdf3f5 url('image/1447239.png') no-repeat 30px center ;
background-size: 5%;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4 背景 内容是否重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 600px;
height: 1000px;
/* 容器没有宽高时由内容撑开宽高 */
border:10px solid red;
margin: 100px auto;
/* background-color: pink;
background-image: url('image/0.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: red url('image/0.jpg') no-repeat center center scroll; /* background复合属性 */
}
</style>
</head>
<body>
<!-- background 背景
background-color：背景颜色
red；
背景颜色不会占用容器宽高
颜色英文关键字
rgb（）；
十六进制
background-image：背景图片
url（c.jpg） 背景图片路径
背景图片默认平铺
背景图不会影响容器宽高
background-repeat：背景图片是否平铺
no-repeat 不平铺
repeat-x x轴方向平铺
repeat-y y轴方向平铺
repeat x y 轴都平铺
background-position：背景图片位置
center center；
x轴 y轴
除用px单位以外还可以用英文关键字
x轴 left right center
y轴 top bottom center
background-attachment：背景是否滚动
fixed； 固定在浏览器可视区域;
scrool 跟随浏览器滚动条滚动;
-->
<div>
<!-- 这是一张图片
<img src="image/bd_logo1.png" alt="" width="200" height="150"> -->
</div>
</body>
</html>
5 边框 border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>边框小练习</title>
<style>
div{
width:800px;
height: 150px;
border:50px solid black;
margin: 0 auto;
border-left-color: red;
border-right-color: skyblue;
}
div:nth-child(1){
border-top-color: tomato;
}
div:nth-child(4){
border-bottom-color: green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
6 边框的语法规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
float: left;
margin-left: 30px;
}
#div1 {
width: 500px;
height: 500px;
border: 1px solid red;
/*宽度 实线 红色 */
border-top: 10px dashed blue;
/*设置边框某个方向的样式 复合样式 */
border-top-color:pink;
/* 设置边框某个方向的单一样式 */
}
.div2{
width: 0px;
height: 0px;
/* 去除宽度和高度查看边框的形状 */
border:30px solid red;
border-left-color: blue;
/* 改变某一条变得颜色来测验边框的形状 */
}
.div3{
width:0;
height:0;
border:10px solid #fff;
/* border-top-color: springgreen; */
/* 使用边框特性 做下拉菜单 三角形 */
border-left-color:slateblue;
}
</style>
</head>
<body>
<!-- border 边框
border-width: 边框宽度
border-style: 边框样式
border-color: 边框颜色
边框样式：
solid :实线
dashed ：虚线
dotted ：点线 （IE6不兼容）
边框方向：
top right bottom left
设置边框某个方向的样式
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
边框的形状 ：非矩形；
-->
<div id="div1"> </div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
7 标签样式初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS reset 标签样式 初始化 </title>
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: top;
/* IE6下出现不兼容问题 图片会有缝隙 清除img样式解决IE: 6;不兼容问题*/
}
</style>
</head>
<body>
<!--CSS reset 规则：但凡浏览器的默认样式都不要去使用；
因为每个浏览器下，标签的默认样式可能会出现不一致的情况；
人为的将所有默认样式全部统一 （清除） 再根据实际情况（设计稿）进行设置
哪些样式是需要重置的？？
与盒模型相关的样式
border --边框
margin --外边距
padding --内边距
标签特有的样式？？
ul>li
ol>li
a
书写原则：
用到什么标签就清除所用标签的默认样式；
不建议将所有标签的全部加上，，
不要所有标签全部统一设置一致的reset，需根据标签默认样式来分类设置。
-->
<ul>
<li>this is a ul 无序列表</li>
<li>this is a ul 无序列表</li>
<li>this is a ul 无序列表</li>
</ul>
<ol>
<li>this is a ol 有序列表</li>
<li>this is a ol 有序列表</li>
<li>this is a ol 有序列表</li>
</ol>
<dl>
<dt>this is a 定义列表 title </dt>
<dd>this is a list item</dd>
</dl>
<h1>this is a title</h1>
<h2>this is a title</h2>
<h3>this is a title</h3>
<h4>this is a title</h4>
<h5>this is a title</h5>
<h6>this is a title</h6>
<p>this is a paragraph</p>
<a href="">this is a link</a>
<strong>（强调） 加粗</strong>
<em>（强调）倾斜</em>
<a href="">
<img src="" alt="">
<!--IE6下出现不兼容问题 图片会有缝隙 -->
</a>
</body>
</html>
8 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:link{
color:black;
}
a:visited{
color:green;
}
a:hover {
color: red;
}
a:active{
color:blue;
}
</style>
</head>
<!--
a超链接
伪类 给元素添加特殊效果
link 未访问的链接初始时
visited 访问过后的链接颜色
hover 鼠标移入 （悬停）
active 鼠标按下时的颜色
-->
<body>
<a href="https://www.baidu.com">超链接</a>
</body>
</html>
9 盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 10px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<!-- 盒模型
盒子大小： = border + padding + width/height
盒子宽度： = 左border + 左padding + width + 右padding + 右border
宽度:10 + 20 + 100 + 20 + 10 = 160
盒子高度： = 上border + 上padding + height +下padding + 下border； -->
<!-- 高度:10 + 20 + 100 + 20 + 10 = 160 -->
<div></div>
</body>
</html>
10 块元素和内联元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块元素和内联元素</title>
<style>
.block {
/* 块元素特性
1 默认独占一行
2 没有宽度时默认撑满一行
3 支持所有css密令
4 常见的快元素有: div p h1-h6 ul li ol li dl dt dd
h5中新增的 header nav section footer
*/
width: 1000px;
height: 100px;
border: 1px solid red;
}
.inline{
/* 行内元素特性
1 同一行可以继续跟着同类的标签
2 内容撑开宽度
3 不支持宽高
4 不支持 上下margin 外边距 支持padding
5 代码换行被解析
6 常见的行内元素有: a span strong em i
*/
width: 1000px;
height: 100px;
border: 1px solid blue;
padding:50px;
}
/* display是将标签转换为页面中显示的类型
display不会改变标签的本质
将块转换为行内
display：inline；
将行内转换为块
display：block；
当然还有一个特殊的将行内转换为行内块
display:inline-block;
*/
</style>
</head>
<body>
<div class="block"></div>
<span class="inline">inline 行内元素</span>
</body>
</html>
这段时间 学习到的所有知识 css 基础知识 都在这里 之后会继续往下学习去继续 往下学习 任务进度 大概可以写出自适应9宫格了 还有个地方并不是很完美
我是百分比做的
代码 展示是这样的 希望大家多多指教 遇到的问题就是不能像任务一样 自由缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>css01-九宫格</title>
<style>
* { padding: 0; margin: 0; }
.main{
width: 90%;
margin: 0 auto;
}
.main div{
width: 26%;
padding-bottom: 10%;
float: left;
background-color: rgb(253, 187, 6);
margin: 10px;
border-radius: 5px;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="main clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>
返回列表
评论