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页面变得 ...
随机推荐
- ubuntu kylin 18.04 安装 Qt Creator 5.11
首先,去官网(https://download.qt.io/official_releases/qt/ )下载Qt Creator的安装包. 我下载的是5.11.1版本文件:qt-opensource ...
- iOS开发之—— 加密使用（MD5，base64，DES，AES）
基本的单向加密算法: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法)SHA(Secure Hash Algorithm ...
- 使用STM32F103ZET霸道主板实现SD卡的读写（非文件系统）
了解STM32F103ZET是高容量多管脚的芯片 了解SD读写线路图 了解SD的基地址 阅读STM32F10xx英文参考 SDIO那章,我们编写代码边看文档解析 建工程,打开包含所有包括外设库函数的样 ...
- FPGA回忆记事（一）：基于Nios II的LED实验
实验一:基于Nios II的LED实验 一. 创建Quartus II工程 1.打开Quartus II环境.开始->程序->Altera->Quartus II 9.1. 2 ...
- Tracking of Features and Edges
目录 Joint Tracking of Features and Edges Joint Tracking of Features and Edges 1. LK光流 基本LK光流运动假设: \[ ...
- IDEA配置Hystrix过程中报错: java.lang.IllegalStateException: No instances available for user-service
最近在练习微服务架构中, 使用IDEA配置完Hystrix, 添加熔断方法后, 在浏览器中访问未启动的( 含有熔断方法注解 )的路径时, 报出了 : 500: No instances availab ...
- SQL中有关DQL、DML、DDL、DCL的概念与区别？
SQL(Structure Query Language)结构化查询语言是数据库的核心语言,是高级的非过程化编程语言.它功能强大,效率高,简单易学易维护.SQL语言基本上独立于数据库本身.使用的机器. ...
- Linux进程批量管理工具
在使用docker容器时,可以有单机的docker-compose批量编排工具,甚至还有集群的k8s之类编排工具,那么在Linux系统中同样也有相关的批量管理进程的工具,其中使用最多的应该就是supe ...
- HTML基础之三(form表单)
.表单form 单是一个包含表单元素的区域. 表单能够包含 input 元素,textarea.select.fieldset.legend 和 label 元素. 表单使用标签(<form&g ...
- spark调优篇-oom 优化(汇总)
spark 之所以需要调优,一是代码执行效率低,二是经常 OOM 内存溢出 内存溢出无非两点: 1. Driver 内存不够 2. Executor 内存不够 Driver 内存不够无非两点: 1. ...