第4期学习班-1.15作业-【CSS-择器】-【CSS-背景】-【CSS-定位】-【CSS-全屏遮罩】-【CSS-Flex-圣杯布局】 - 作业提交

Home > List of blog posts > 第4期学习班-1.15作业-【CSS-择器】-【CSS-背景】-【CSS-定位】-【CSS-全屏遮罩】-【CSS-Flex-圣杯布局】

Blogger Information

Blog 18

fans 0

comment 0

visits 14047

Special Recommendation

More>

Related recommendations

实例1.CSS-常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<style type="text/css">
/*群组选择器*/
ul, li {
	padding: 0;
	margin: 0;
	overflow: hidden;
}
/*标签选择器*/
ul {
	border: 1px dashed #f00;
	padding: 10px;
}
/*层级选择器*/
ul li {
	width: 40px;
	height: 40px;
	list-style-type: none;
	background-color: #DFDDBF;
	border-radius: 50%;
	float: left;
	text-align: center;
	line-height: 40px;
	margin-right: 2em;
	font-weight: bold;
	-webkit-box-shadow: 2px 2px 1px;
	box-shadow: 2px 2px 1px;
}
/*class类选择器*/
.red {
	background-color: #f00;
}
/*ID选择器*/
#yello {
	background-color: #ff0;
}
/*属性选择器，用[]中的属性来选择对象*/
li[id="yello"] {
	border: 2px solid #f00;
}
/*兄弟选择器，用 ~ 选择相邻的对象*/
#yello ~ * {
	background: -#fcc;
}
/*相邻选择器，用+号选择与之相邻的对象*/
#yello + * {
	background: #f99;
}
/*伪类选择器，子元素，选择第一个*/
ul:first-child {
	color: #F4BD00;
}
/*伪类选择器，子元素，选择最后一个*/
ul:last-child {
	color: #D000FF;
}
/*伪类选择器，括号中输入数字可以选择元素排序，2n为偶数，2n+1为奇数*/
ul li:nth-child(2n) {
	background-color: #3E90E3;
}
ul li:nth-child(2n+1) {
	background-color: #E33E9F;
}
/*伪类选择器，倒序*/
ul li:nth-last-child(2) {
	color: #fff60e;
}
/*伪类选择器，> 尖括号为选择子元素*/
div > :nth-child(2) {
	background-color: #fff60e;
}
/*表单选择器，所有有效表单元素,注意，form的后面要有一个空格！！！！！！不然效果无效，坑爹的*/
form :enabled {
	background-color: #fff60e;
}
form [type="button"]:enabled {
	background-color: #f5f5f5;
}
/*表单选择器，checked被选择中的元素,选择的元素是input，+*是选它的兄弟元素，也就是label元素，就可以控制文本颜色*/
form :checked + * {
	color: crimson;
	font-weight: bold;
}
/*表单选择器，focus焦点选择,当鼠标选择某个元素时，就是起效果*/
form :focus {
	background-color: #f4f4f4;
}
form [type="button"]:hover {
	background-color: khaki;
}
/*表单选择器，表单验证，如果输入无效的值则起效果*/
form :invalid {
	color: #f00;
}
}
</style>
</head>
<body>
<h3>CSS样式的常用控制</h3>
<ul>
  <li class="red">类</li>
  <li id="yello">ID</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<div>
  <p>hello moto!</p>
  <p>西门大官人</p>
  <p>moto sir!</p>
</div>
<div>
  <p>灭绝师太</p>
  <p>韦小宝</p>
</div>
<form action="">
  <label for="textfield">邮箱：</label>
  <input type="email" >
  <br>
  <label for="password">密码：</label>
  <input type="password">
  <br>
  <input type="radio" name="radio" id="radio" value="radio">
  <label for="radio">保存一周 </label>
  <input type="radio" name="radio" id="radio2" value="radio2">
  <label for="radio2">保存一月 </label>
  <input type="button" value="登录">
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例2.CSS-背景

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的背景</title>
<style>
div {
	float: left;
	width: 300px;
	height: 300px;
	border: 3px solid #ccc;
	margin: 10px 10px 0 0;
}
/*设置元素背景颜色*/
.bg1 {
	background-color: aqua;
}
/*设置元素半透明背景颜色，用RGAB颜色模型表示，前面3个数字代表红绿蓝的数值，后面的是表示透明度，1为不透明，0为透明，小数可设置为半透明*/
.bg2 {
	background-color: rgba(177,26,29,0.50);
}
/*设置元素渐变背景颜色,linear-gradient线性渐变，deg是渐变角度，颜色值1  渐变位置百分百,颜色值2  渐变位置百分百,颜色值3  渐变位置百分百,....*/
.bg3 {
	background-image: -webkit-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
	background-image: -moz-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
	background-image: -o-linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
	background-image: linear-gradient(150deg, #f00 0%, #ff0 49.22%, #0f0 100%);
}
/*设置元素背景图片*/
.bg4 {
	background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
}
/*设置元素背景图片缩放大小,cover为拉升到容器大小*/
.bg5 {
	background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
	background-size: cover
}
	/*设置元素背景图片缩放大小,百分比可以设置缩小比例，repeat是控制重复，position可以控制位置*/
.bg6 {
	background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
	background-size: 80% ;
	background-repeat: no-repeat;
	background-position:center;
}
</style>
</head>

<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg5"></div>
<div class="bg6"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例3.CSS-固定定位

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>固定定位</title>
    <style>
body {
	height: 1500px;
}
p {
	width: 300px;
	height: 300px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	background-color: #f00;
}
</style>
    </head>

    <body>
    <p>固定定位广告位</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例3.CSS-实现定位遮罩

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-flexBOX实现全屏定位遮罩</title>
<style>
body {
	margin: 0;
	padding: 0;
	background-image: url(http://f.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd5eb22fe902b30f2442a70f37.jpg);
}
.flex {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
}
.box {
	width: 250px;
	height: 350px;
	background-color: rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
}
</style>
</head>

<body>
<div class="flex">
  <dix class="box">CSS-flexBOX实现全屏定位遮罩</dix>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例4.CSS-圣杯布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局-圣杯布局</title>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
}
.box1200 {
	width: 1200px;
}
#header {
	background: #f5f5f5;
	height: 45px;
	display: flex;
	justify-content: center;
}
#header nav {
	flex-direction: row;
	justify-content: space-between;
	text-align: center;
	display: flex;
}
#header nav a {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	background-color: #CDF4E3;
	text-decoration: none;
	margin: 0 5px 0 0;
	color: #000;
}
#header nav a:last-child {
	margin: 0;
}
#header nav a:hover {
	background-color: #f00;
}
.flex {
	display: flex;
	justify-content: center;
}
.flex .box1200 {
	display: flex;
	height: 800px;
}
#main {
	flex: 1;
	background-color: #ff0;
}
.left {
	flex: 0 0 300px;
	order: -1;
	background-color: bisque;
}
.right {
	flex: 0 0 300px;
	order: 1;
	background-color:burlywood;
}
#footer {
	display: flex;
	background-color: #f5f5f5;
	height: 50px;
	justify-content: center;
}
#footer .box1200 {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
</head>

<body>
<header id="header">
  <nav class="box1200">
    <a href="#">栏目名称</a>
    <a href="#">栏目名称</a>
    <a href="#">栏目名称</a>
    <a href="#">栏目名称</a>
    <a href="#">栏目名称</a>
  </nav>
</header>
<div class="flex">
  <div class="box1200">
    <main id="main">页面主体内容</main>
    <div class="left">左侧内容区域</div>
    <div class="right">右侧内容区域</div>
  </div>
</div>
<footer id="footer">
  <div class="box1200">页面底部区域</div>
</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

第4期学习班-2.22作业-【PDO基础】-【PDO连接数据库】-【PDO-增加一条数据】

2019-02-24 19:16:10