前端学习：学习笔记（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和定义列表:引用块 ...
随机推荐
- QString判断空 isEmpty
isEmpty Returns true if the string has no characters; otherwise returns false. QString().isEmpty(); ...
- bat脚本里面if else if的写法
曾经困扰了很久的bat脚本,如果里面包含多种条件判断,就必须要试用if,else if,else的写法了.尝试了很久,终于找到规律: 第一种写法:最简单,就是写一行. @echo off rem 写一 ...
- kafka-python开发kafka生产者和消费者
1.安装kafka-python 执行命令 pip install kafka-python kafka-python 1.4.6 2.编写python kafka 生产者消费者代码 # ...
- 数字、字符串、列表、字典，jieba库，wordcloud词云
一.基本数据类型 什么是数据类型 变量:描述世间万物的事物的属性状态 为了描述世间万物的状态,所以有了数据类型,对数据分类 为什么要对数据分类 针对不同的状态需要不同的数据类型标识 数据类型的分类 二 ...
- tornado 之 RequestHandler（请求）
RequestHandler from tornado.web import ReuqestHandler 一.利用HTTP协议想服务器传递参数 提取url的特定部分 http://127.0.0.1 ...
- 关于UE4音效的一些小问题
前言 前几天实在忍受不了StarterContent默认音效的折磨,去网上翻罗了一下初中时很着迷的游戏<Bounce-Tales>的音效,在导入音效时出了点问题,特此说明一下解决方案,希望 ...
- AWS之EC2实例搭建LAMP服务器
在 Amazon Linux 2 上安装 LAMP Web 服务器 创建EC2实例,在安全组添加HTTP(80)规则 步骤 1:准备 LAMP 服务器 1.使用putty连接到你的EC2实例上(AMI ...
- Unity Built-In Shader造成的运行时内存暴涨
在某个PC项目中使用了大量的材质球, 并且都使用了自带的Standard Shader, 在编辑器运行的时候, 一切良好, 运行内存只在1G左右, 然而在进行AssetBundle打包之后, EXE运 ...
- Mybatis-plus入门学习]
需要的数据库建表语句: #创建用户表 CREATE TABLE user ( id BIGINT(20) PRIMARY KEY NOT NULL COMMENT '主键', name VARCHAR ...
- 通过Socket实现TCP编程（十二）
原文链接:https://www.cnblogs.com/hysum/p/7531529.html Socket通信 : TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 基于TCP ...