前端学习：学习笔记（CSS部分）
前端学习：学习笔记（CSS部分）
CSS的引入方式和书写规范
CSS的插入方式_内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!-- 插入CSS代码的第1种方式: 内嵌形式 -->
<div style="height: 300px;width: 300px;background-color: red;">
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
color: yellow;
}
</style>
</head> <body>
<!-- 插入CSS代码的第2种方式: 内部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div> </body> </html>
CSS的插入方式_外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Demo1.css" />
</head> <body>
<!-- 插入CSS代码的第3种方式: 外部形式 -->
<div>
<h1>我是DIV--1号</h1>
</div> <div>
<h1>我是DIV--2号</h1>
</div>
</body> </html>
Demo01.css
div{
height: 500px;
width: 500px;
background-color: #FFFF00;
color: black;
}
CSS选择器
CSS标签选择器
<head>
<meta charset="utf-8" />
<title></title>
<!--
选择器的作用: 根据我们的项目需要,找到我们需要找到的某一些标签 选择器{
属性:属性值; ==>键值对
属性:属性值;
属性:属性值;
属性:属性值;
}
-->
<style>
div{
height: 300px;
width: 300px;
background-color: red;
} </style>
</head> <body>
<div><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSSid选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 400px;
width: 400px;
background-color: blue;
color: red;
}
</style>
</head>
<body>
<div id="d1"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
CSS类选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clazz{
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head> <body>
<div class='clazz'><h1>DIV1</h1></div>
<div class='clazz'><h1>DIV2</h1></div>
<div class='clazz'><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用多个选择器的情况
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: black;
} .clazz{
background-color: yellow;
} #d1{
background-color: red;
} </style>
</head> <body>
<div id="d1" class="clazz"><h1>DIV1</h1></div>
<div><h1>DIV2</h1></div>
<div><h1>DIV3</h1></div>
<div><h1>DIV4</h1></div>
<div><h1>DIV5</h1></div>
</body>
同时使用三种方式插入CSS代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
background-color: blue;
}
</style>
<link rel="stylesheet" href="css/Demo05.css" />
</head> <body>
<div style="height: 100px;width: 100px;background-color: red;"><h1>DIV1</h1></div>
</body>
同时使用三种方式插入CSS代码.css
div{
height: 300px;
width: 300px;
background-color: yellowgreen;
}
属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
margin-bottom: 10px;
color: red;
} div[align="left"]{
background-color: yellow;
}
div[align="right"]{
background-color: blue;
} </style>
</head> <body>
<div align="left">DIV1</div>
<div align="left">DIV2</div>
<div align="right">DIV3</div>
<div align="right">DIV4</div>
<div align="right">DIV5</div> </body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
a:link{
color: yellowgreen;
}
a:hover{
color: black;
text-decoration: underline;
}
a:active{
color: darkgray;
}
a:visited{
color: darkblue;
}
</style>
</head> <body>
<h1>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="#1">百度一下</a><br>
<a href="http://www.baidu.com">百度一下</a><br>
</h1>
</body>
层级选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 a{
color: red;
} </style>
</head>
<body>
<div id='d1'>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
<a>百度一下</a>
</div>
<a>百度一下</a> </body>
CSS属性
CSS中的文本属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: yellowgreen;
font-family: "微软雅黑";
font-size: 50px;
color: red;
text-decoration: none;
text-align: right;
font-weight: bold;
line-height: 120px;
}
span{
color: black;
} </style>
</head>
<body>
HTML是世界上最好的编程语言.<br>
<span>
HTML是世界上最好的编程语言.<br>
HTML是世界上最好的编程语言.<br>
<span>
</body>
CSS中的背景属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: red;
background-image: url(img/tphot.jpg);
background-repeat: repeat-y; }
</style>
</head>
<body>
</body>
CSS中的列表属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li{
list-style-type:none;
list-style-image:url(img/tphot11.jpg);
}
</style>
</head> <body>
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul>
</body>
CSS中的显示属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: red;
display: inline;
} ul li{
list-style-type: none;
display: inline;
} span{
height: 300px;
width: 300px;
background-color: salmon;
/*display: block;*/
} </style>
</head>
<body>
<input type="text" />
<div>
DIV
</div>
HTML
<ul>
<li>第1名</li>
<li>第2名</li>
<li>第3名</li>
<li>第4名</li>
</ul> <span>
我是一个块级标签
</span>
xxxxxx </body>
CSS中的浮动属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size: 30px;
font-weight: 900;
color: rosybrown;
}
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
} #d2{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
} #d3{
height: 300px;
width: 300px;
background-color: black;
float: right;
} .clear{
clear: both;
}
</style>
</head> <body>
<div id="d1">DIV1</div>
<div id="d2">DIV2</div>
<div id="d3">DIV3</div>
<div class="clear"></div>
</body>
练习：注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#header{
height: 100px;
width: 100%;
} #content{
height: 700px;
width: 60%;
/*设置页面居中*/
margin: auto;
border: 2px solid black;
} .c1{
height: 30px;
width: 100%;
background-color: #F7F7F7;
} .c2{
height: 200px;
width: 100%;
background-color: white;
} #c2-left{
height: 100%;
width: 30%;
float: left;
text-align: right;
} #c2-left div{
height: 20%;
} #c2-right{
margin-left: 20px;
height: 100%;
width: 60%;
float: left;
}
#c2-right div{
height: 20%;
} .clear{
clear: both;
} .c6{
height: 120px;
width: 100%;
background-color: white;
}
#c6-zhuce {
height: 40px;
width: 250px;
background-color: red;
text-align:center;
margin: auto; }
#c6-zhucezi{
padding: 8px;
}
span{
color: red;
} </style>
</head> <body>
<div id="header"></div>
<div id="content">
<div class="c1"><strong><font> 账户信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>用户名:</div>
<div><span>*</span>请输入密码:</div>
<div><span>*</span>请确认密码:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div><input type="password"/></div>
<div><input type="password"/></div>
</div>
<div class="clear"></div>
</div> <div class="c1"><strong><font> 联系人信息</font></strong></div>
<div class="c2">
<div id="c2-left">
<div></div>
<div><span>*</span>联系人姓名:</div>
<div><span>*</span>所在部门:</div>
<div><span>*</span>固定电话:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
<select>
<option selected="selected">请选择</option>
<option value="yjb">研究部</option>
<option value="xzb">行政部</option>
<option>人事部</option>
<option>市场部</option>
</select>
</div>
<div><input type="text"/></div>
</div>
<div class="clear"></div>
</div>
<div class="c1"><strong><font> 公司信息</font></strong></div>
<div class="c6">
<div id="c2-left">
<div></div>
<div><span>*</span>公司名称:</div>
<div><span>*</span>购买类型/用途:</div>
</div>
<div id="c2-right">
<div></div>
<div><input type="text"/></div>
<div>
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" />
IT设备<input type="checkbox" checked="checked"/>
</div>
</div>
<div class="clear"></div>
</div> <div id="c6-zhuce">
<div id="c6-zhucezi">
<font color="white">立即注册 </font>
</div>
</div> </div> </body> </html>
CSS盒子模型
盒子模型
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 300px;
width: 300px;
background-color: darkgreen;
/*上下左右*/
padding: 50px;
/*上 左右 下*/
/*padding: 50px 100px 150px;*/
/*padding: 50px 100px 150px 200px;*/
border: 5px solid red; } #moon{
height: 300px;
width: 300px;
background-color: yellow;
} #d1{
height: 300px;
width: 300px;
border: 5px dashed black;
} #d2{
height: 300px;
width: 300px;
border: 5px dotted black;
} div{
margin-left: 50px;
margin-bottom: 100px;
} </style>
</head> <body> <div id="box">
<div id="moon"></div>
</div> <div id="d1"></div> <div id="d2"></div> </body>
圆角边框
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 300px;
height: 300px;
border: 5px solid red;
margin: auto;
margin-top: 100px;
/*border-radius: 50px;*/
/*border-radius: 50px 100px 150px;*/ }
#d2{
width: 300px;
height: 300px;
border: 5px solid blue;
border-radius: 150px;
}
#d3{
width: 300px;
height: 150px;
border: 5px solid blue;
border-radius: 300px 300px 0px 0px;
} #d4{
width: 300px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 0px 300px 300px;
} #d5{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 300px 0px 0px 300px;
} #d6{
width: 150px;
height: 300px;
border: 5px solid greenyellow;
border-radius: 0px 300px 300px 0px;
} #d7{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 150px 0px 0px 0px;
} #d8{
width: 150px;
height: 150px;
border: 5px solid greenyellow;
border-radius: 0px 150px 0px 0px;
} </style>
</head>
<body> <div id="d1"></div> <div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
</body>
盒子阴影
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 500px;
width: 500px;
background-color: salmon;
box-shadow: 0px 0px 30px yellowgreen;
}
</style>
</head>
<body> <div></div> </body>
CSS 的定位
相对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: greenyellow;
margin-top: 20px;
/*设置相对定位*/
position: relative;
left: 150px;
/*right: 100px;*/
float: left;
/*top: 50px;*/
bottom: 100px;
}
#d2{
height: 300px;
width: 300px;
background-color: cornflowerblue;
margin-top: 20px;
float: left;
} </style>
</head> <body>
<div id="d1">
</div> <div id="d2">
</div>
</body>
绝对定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
margin-top: 20px;
float: left;
} #d1{
background-color: greenyellow;
} #d2{
background-color: yellow;
/*设置成绝对定位*/
position: absolute;
left: 100px;
top: 500px; } #d3{
background-color: red;
}
</style>
</head> <body> <div id="d1">
</div> <div id="d2">
</div> <div id="d3">
</div>
</body>
固定定位
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 5000px; }
div{
height: 100px;
width: 80%;
background-color: greenyellow;
/*设置成固定定位*/
position: fixed;
top:300px;
}
</style>
</head> <body>
<div id="d1">我是一个广告~~~~~~~~~~~~~</div>
</body>
z-index属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
position: relative;
z-index: 10;
} #d2{
height: 300px;
width: 300px;
background-color: blue;
float: left;
margin-left: -200px;
margin-top: 50px;
z-index: 5;
position: relative;
} #d3{
height: 300px;
width: 300px;
background-color: yellowgreen;
float: left;
margin-left: -200px;
margin-top: 100px;
z-index: 1;
position: relative;
}
</style>
</head> <body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
设置元素透明度
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 300px;
width: 300px;
background-color: blue;
opacity: 0.1;
}
</style>
</head>
<body>
<div>
DIV
</div>
</body>
前端学习：学习笔记（CSS部分）的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- SQLServer修改表名、修改列名
基本语法 修改表名:EXEC sp_rename ‘原有表名’, '新表名'; 修改列名:EXEC sp_rename ‘表名.[原有列名]’, ‘新列名' , 'COLUMN'; EXEC sp_r ...
- MySQL整形手工注入
0x1 判断注入点: http://www.xxx.org/members.php?id=1 and 1=1 --+ # ture http://www.xxx.org/members.php?id= ...
- eclipse 导出 jar包详细步骤
如图所示:
- c# 读取txt文件中文乱码解决方法
之前做过一个项目,在程序运行目录下有个txt文件,文件内容是中文的时候会乱码, 后来用这个函数处理后,就不乱码了: private string GetPDA_Code() { ...
- Qt固定窗口大小
指定大小 this->setMaximumSize(250, 250); 默认大小 this->setMaximumSize(this->width(), this->heig ...
- PostgreSQL limit
1. select * from my_table limit 10 offset 5 数据是从第0条开始的,所以这句代码表示从 第六条数据开始的10行数据. 2. select * from my_ ...
- mysql udf提权实战测试
根据前天对大牛们的资料学习,进行一次mysql udf提权测试. 测试环境: 受害者系统:centos 7.7 ,docker部署mysql5.6.46, IP:192.168.226.128 攻击者 ...
- luogu P1904 天际线
分析 都知道是从左向右扫描 可是该维护什么,扫描什么? 注意想想怎么输出, 实际上它要的输出就是图形的轮廓,即每个突出块的左上节点的x,y 所以说, 我们可以把扫描线扫进的楼房放入线段树,扫出的楼房删 ...
- 跟着ALEX 学python day4集合 装饰器 生成器 迭代器 json序列化
文档内容学习于 http://www.cnblogs.com/xiaozhiqi/ 装饰器 : 定义: 装饰器 本质是函数,功能是装饰其他函数,就是为其他函数添加附加功能. 原则: 1.不能修改被装 ...
- 201871010117 石欣钰《面向对象程序设计（Java）》第十二周学习总结
内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...