简单html以及css的用法
我将利用三天的时间来完成制作京东首页的静态页面效果，其中包含的内容有html以及css。
1、在开发进行之前，首先要配置开发环境：我们需要安装sublime webstorm vscode Hbuilder atom等开发软件，选择其一即可。我所使用的是webstorm。
2、在主文件夹中建立相关的项目文件夹 ：为了将与项目相关的文件放在一块，便于管理和以后的维护。
其中：包括与项目相关的一些文件
主页或是首页 index.html default.html
Css文件夹 css文件的
Base.css global.css
Images文件夹 用来放置网站中的所有的图片
Js文件
音频或是视频文件
3、在这之后我们要进行样式初始化，一般所有网站开发之前都会进行样式初始化，例如淘宝、京东这样的大网站，都有自己的样式初始化css文件。如：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
fieldset, img, input, button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none;
}
/*去掉原样式中的小黑点*/
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
select, input {
vertical-align: middle;
}
/*输入字居中显示*/
select, input, textarea {
font-size: 12px;
margin: 0;
}
/**/
textarea {
resize: none;
}
/*防止拖动*/
img {
border: 0;
vertical-align: middle; /* 去掉图片底部默认的3像素空白缝隙*/
}
table {
border-collapse: collapse; /*合并外连线*/
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的写法，宋体的写法*/
color: #666; /*150%基于当前字体尺寸的百分比行间距*/
background: #fff;
}
.clearfix:before, .clearfix:after {
/*清除浮动，最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #C81623;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em {
font-style: normal;
text-decoration: none;
}
.col-red {
color: #C81623 !important;/*京东主色调*/
}
/*公共类*/
.w {
/*版心 提取 */
width: 1210px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.al {
text-align: left;
}
.ac {
text-align: center;
}
.ar {
text-align: right;
}
.hide {
display: none;
}
这样可以方便开发人员对各个标签的样式的初始化以及公共类的重用。
4、分析网站结构
做网站的时候也有一个规范或是通例
布局的顺序一般是从上到下，从左到右
在写页面的时候，一般考虑使用标准流的元素，其次才使用浮动或是定位。
就在标准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin.
我们网站结构中的任何标签 都可以看成是一个盒模型，都可以设置宽高，只是有的元素设置了宽高之后，不起作用。
要想让行内元素的宽高起作用：
1. 将行内元素转换成块级元素或是行内块元素
2. 浮动 脱标
3. 定位 脱标
在布局行内块元素时，行内块元素之间有默认的几像素的间距。这几像素的间距只能用浮动来清除。
定位有四种：
Fixed absolute relative static
一般我们在分析网站结构时，使用火狐浏览器可以将这个网页截图之后保存下来：
然后我们可以使用fireworks来提取网站中的具体内容的宽高、颜色等。
Fw的常用快捷键：
I 滴管工具 吸取颜色
K 切片工具 量取元素的宽度
Z 放大镜工具
V 移动
A 指针工具
常用的复合属性：
Background
mso-char-indent-count:3.4900;">浮动的原因就是因为父盒子没有高度，原来的高度是靠标准流中的子元素撑起来，但是子元素浮动了之后 ，脱离标准流了，造成父级元素的高度为0;
- 给父盒子设置一个高度
- Clear: both
- Overflow: hidden 触发了BFC模式 也可以用来清除浮动
- 伪元素或是双伪元素清除法
.clearfix:before, .clearfix:after {
/*清除浮动，最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
（一般常用伪元素的方法来清除浮动）
定位元素的层级问题：
如果只给一个元素绝对定位，而不写trbl值的话，会以原位显示
定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素，在同一个位置的话，后面的元素默认会压住前面的元素。如果同样是定位了的元素，默认他们的层级都是0，只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上，这个时候就需要改变层级的关系,用z-index来改变。
z-index的取值范围0---9999999，最好是正数，尽量不要用负数。
另外要注意，position:relative依旧会占据标准流中的位置，会导致其他内容无法在其层级上显示。
透明度opacity
Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明
background: rgba(0,0,0,.3);
仅让背景色透明，内容不透明
相邻元素的层级问题
淘宝网页中鼠标移入后边框闪现效果
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 500px;
border: 10px solid blue;
float: left;
/*margin-right: 10px;*/
margin-left: -10px;
position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/
}
div:hover {
border-color: red;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
这样就可以通过相邻元素的层级问题，用hover伪元素来控制边框的颜色以及其他属性，达到淘宝那样的效果。
简单html以及css的用法的更多相关文章
- 牢记 31 种 CSS 选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- 网页重构应该避免的10大 CSS 糟糕用法
对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- 网页重构应该避免的10大CSS糟糕用法
对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...
- css奇特用法之 IMG添加背景图片配合显示--效果惊艳
IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...
- Css相关用法个人总结
Css相关用法个人总结
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- python简单的函数定义和用法实例
python简单的函数定义和用法实例 这篇文章主要介绍了python简单的函数定义和用法,实例分析了Python自定义函数及其使用方法,具有一定参考借鉴价值,需要的朋友可以参考下 具体分析如下: 这里 ...
随机推荐
- windows下实现uboot的tftp下载功能
一.原理分析 带有uboot的开发板实际上充当的就是tftp客户端,而PC机扮演的角色就是tftp服务器端,而tftp下载功能实际上就是文件传输.tftp服务器可以建立在虚拟机linux下,也可以建立 ...
- bzoj2395: [Balkan 2011]Timeismoney
Description 有n个城市(编号从0..n-1),m条公路(双向的),从中选择n-1条边,使得任意的两个城市能够连通,一条边需要的c的费用和t的时间,定义一个方案的权值v=n-1条边 ...
- Node.js规范化应用
Node.js运行在一个单线程模式,但它使用一个事件驱动范例来处理并发.它还有助于创建子进程,以充分利用并行处理的多核CPU系统. 子进程总是有三个流child.stdin,child.stdout和 ...
- SPSS问题
1.SPSS中变量视图里的度量标准的三个选项是什么意思 Nominal名义变量是对数据进行分类得到的变量,如按性别分为男女,按年龄分为老.中.青: Ordinal顺序变量是对数据进行排序得到的变量,如 ...
- Tengine简单安装
跟NGINX一样,没有深入研究配置,因为暂时用不到..:) 下载2.10,基于NGINX1.6.2的. 我的配置参数如下: ./configure --with-openssl=/root/tengi ...
- 【原生态跨平台：ASP.NET Core 1.0(非Mono)在 Ubuntu 14.04 服务器上一对一的配置实现-篇幅1】
鸡冻人心的2016,微软高产年. build 2016后 各种干货层出不穷. 1 Win10 集成了bash ,实现了纳德拉的成诺,Microsoft Love Linux!!! 2 跨平台 ,收 ...
- ASP.NET服务器推送及前后台实时交互
一:项目需求 页面需要做一个上传Excel功能,并处理Excel中的数据到数据库中 这是一个较为漫长的过程 这时我需要在页面上显示处理进度的提示,给用户一个良好的体验 比如给用户提示“正在上传文档”, ...
- phpMyAdmin 跨站脚本漏洞
漏洞名称: phpMyAdmin 跨站脚本漏洞 CNNVD编号: CNNVD-201307-647 发布时间: 2013-08-09 更新时间: 2013-08-09 危害等级: 低危 漏洞类型: ...
- 图论 BZOJ 3669 [Noi2014]魔法森林
Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...
- NOI题库1799 最短前缀
1799:最短前缀 总时间限制: 1000ms 内存限制: 65536kB 描述 一个字符串的前缀是从该字符串的第一个字符起始的一个子串.例如 "carbon"的字串是: &quo ...