web开发：css总结与应用
一、常用标签的使用
二、边界圆角
三、背景样式
四、精灵图
五、盒模型布局细节
六、盒模型案例
七、w3c主页
一、常用标签的使用
<!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> <!-- 2.设置前往锚点的a转跳: #锚点名 -->
<a href="#page_top">Top</a>
<a href="#t_123">123</a>
<a href="00_复习预习.html#md">前往锚点</a>
</body>
</html>
二、边界圆角
<!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>
三、背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background-color: orange;
}
.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: 10px 40px; /*整体设置*/
background: url('img/123.png') red no-repeat 50px 50px;
}
/*注: 实际开发中,资源图片大小一定要与显示区域等大*/
</style>
</head>
<body>
<img src="img/123.png" alt="">
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
四、精灵图
<!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>
五、盒模型布局细节
<!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>
六、盒模型案例
<!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>
七、w3c主页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>w3c</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.wraper {
/*为子级规定宽度, 高度由子级撑开*/
width: 1210px;
margin: 0 auto;
background-color: #FDFCF6;
}
</style>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wraper">
<!-- header -->
<div class="header">
<h1 class="header-h1">w3c主页</h1>
<div class="header-search">
<!-- <div> -->
<input type="text">
<button>ok</button>
<!-- </div> -->
</div>
</div>
<!-- nav -->
<ul class="nav">
<li class="li1"><a href="" title=""></a></li>
<li class="li2"><a href="" title=""></a></li>
<li class="li3"><a href="" title=""></a></li>
<li class="li4"><a href="" title=""></a></li>
<li class="li5"><a href="" title=""></a></li>
<li class="li6"><a href="" title=""></a></li>
<li class="li7"><a href="" title=""></a></li>
</ul>
<!-- main -->
<div class="main">
<div class="main-left">
<div class="hidden"></div>
<h2>HTML 教程</h2>
<ul>
<li><a title="HTML 教程" href="">HTML</a></li>
<li><a title="" href="">HTML5</a></li>
<li><a title="" href="">XHTML</a></li>
<li><a title="" href="">CSS</a></li>
<li><a title="" href="">CSS3</a></li>
<li><a title="" href="">TCP/IP</a></li>
</ul> <h2>HTML 教程</h2>
<ul>
<li><a title="HTML 教程" href="">HTML</a></li>
<li><a title="" href="">HTML5</a></li>
<li><a title="" href="">XHTML</a></li>
<li><a title="" href="">CSS</a></li>
<li><a title="" href="">CSS3</a></li>
<li><a title="" href="">TCP/IP</a></li>
</ul>
</div>
<div class="main-center">
<div class="main-box b1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>从左侧的菜单选择你需要的教程！</b>
</p>
</div>
<div class="main-box b2">
<h2>完整的网站技术参考手册</h2>
<p>我们的参考手册涵盖了网站技术的方方面面。</p>
<p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
</div> <div class="main-box b2">
<h2>完整的网站技术参考手册</h2>
<p>我们的参考手册涵盖了网站技术的方方面面。</p>
<p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
</div>
</div>
<div class="main-right">
<div class="hidden"></div>
</div>
</div>
<!-- footer -->
<div class="footer"></div>
</div>
</body>
</html>
web开发：css总结与应用的更多相关文章
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- 静态Web开发 CSS
二章 CSS 1节CSS介绍 CSS(Cascading Style Sheets) //cascade级联,串联CSS由两个部分组成:选择器,以及一条或多条声明selector{declaratio ...
- web 开发 css 默认值列表
css默认值列表 HTML标签CSS属性默认值汇总 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Web开发中20个很有用的CSS库
来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...
- Wee – 为现代 Web 开发打造的 CSS 脚手架
Wee 包含许多开发人员在搭建响应的,互动的网站和应用程序时需要的组件.正如它的名字一样,Wee 是一个微小.移动优先的 CSS 复位框架.Wee 组织在一个简单的.可扩展的层次结构,拥有一致的样式和 ...
- Normalize.css – 现代 Web 开发必备的 CSS resets
Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...
- Web 开发中 20 个很有用的 CSS 库
转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- web前端开发——css
一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...
随机推荐
- DIV+CSS 让同一行的图片和文字对齐【转藏】
DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...
- 超详细的EM算法理解
众所周知,极大似然估计是一种应用很广泛的参数估计方法.例如我手头有一些东北人的身高的数据,又知道身高的概率模型是高斯分布,那么利用极大化似然函数的方法可以估计出高斯分布的两个参数,均值和方差.这个方法 ...
- JavaScript基础------JavaScript语法
js的注释与分号 // 单行注释 /**/多行注释 ctrl +shift +/ 语句结束使用分号,如果省略,则由解析器确定语句的结尾js语法 1.变量.函数名.操作符都区分大小写 2.标识符 (1) ...
- 网页是如何实现从剪贴板从读取图片并上传到server的
代码比较简单,原理更简单,不多言请直接看代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- oracle自增主键
本文参考-https://www.cnblogs.com/xxaxx/p/3584036.html oracle没有像sqlserver中identity一样的函数,需要依赖于序列.触发器来实现自增主 ...
- c++学习笔记_2
前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 第二章 ...
- spring 机制 扫描包
控制器示例 扫描包注解代码 @SpringBootApplication(scanBasePackages = {"cn.maxhou.*"}) 引号内为包名,支持*通配符 为什么 ...
- SpringBoot整合Redis及Redis工具类
前言 想做一个秒杀项目,问了几个大佬要了项目视频,结果,自己本地实践的时候,发现不太一样,所以写下这篇,为以后做准备. 环境配置 IDE:IDEA 环境:Windows 数据库:Redis Maven ...
- SpringBoot：SpringBoot整合JdbcTemplate
个人其实偏向于使用类似于JdbcTemplate这种的框架,返回数据也习惯于接受Map/List形式,而不是转化成对象,一是前后台分离转成json方便,另外是返回数据格式,数据字段可以通过SQL控制, ...
- 学习笔记：CentOS7学习之二十三： 跳出循环-shift参数左移-函数的使用
目录 学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用 23.1 跳出循环 23.1.1 break和continue 23.2 Shift参数左移指令 23.3 函数 ...