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页面变得 ...
随机推荐
- linux 怎样关闭x server？
如果想切换至纯粹一点的命令字符console下,一般人会认为切换Ctrl+Alt+F1(或者F2-F6都可以). 默认下,Ctrl+Alt+F7是图形界面(当然,各个Linux发行版本会有所差异). ...
- 2019年9月Leetcode每日训练日志
2019-09-16 #1171 从链表中删去总和值为零的连续节点 #1170 比较字符串最小字母出现频次 #1169 查询无效交易 #226 翻转二叉树 2019-09-15 #1190 反转每对括 ...
- spring中的BeanFactoryPostProcessor
spring中的BeanFactoryPostProcessor和BeanPostProcessor有些像,BeanPostProcessor是在bean的初始化前后进行一些操作, BeanFacto ...
- Django各个文件中常见的模块导入
app01 app01 urls.py from django.conf.urls import url from django.contrib import admin from admins im ...
- codevs 1039：数的划分
http://codevs.cn/problem/1039/ 题目描述 Description将整数n分成k份,且每份不能为空,任意两种划分方案不能相同(不考虑顺序).例如:n=7,k=3,下面三种划 ...
- jqGrid只向服务器请求一次的设置
也就是说,在表格初始化时请求一次服务器,以后翻页就不再请求服务器,翻页的也只是初始化数据. 一次复制别人的代码时,一直不知道为什么翻页不请求服务器. 搞到人都爆炸,原来只是一个设置的地方. loado ...
- 线上Storm的worker，executor，task参数调优篇
问题引入: 线上最近的数据量越来越大,出现了数据处理延迟的现象,观察storm ui的各项数据,发现有大量的spout失败的情况,如下: ------------------------------- ...
- 初识 docker
一.安装Docker 我使用的是腾讯云上的centos 7. docker -v 查看是否已经安装有docker 如果有 systemctl stop docker 停止docker服务 查看当前版本 ...
- JavaSE基础（八）--Java 循环结构
Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...
- Design Excel Sum Formula
Your task is to design the basic function of Excel and implement the function of sum formula. Specif ...