第1天：CSS基本样式
今天学习了CSS基本样式和属性。在做练习的时候遇到一个小问题，最后解决了。
记住：浏览器有默认margin和padding。样式最开始记得一定写：*{margin:0;padding:0}。
学习经验：
1、margin值相邻两个元素的margin会叠加在一起
2、margin子元素的值会传递给父元素
3、能用padding,尽量不用margin，margin浏览器兼容性较差。
4、h标签不能直接写在ul中，必须用li包起来。简言之，ul下只能是li标签。
下面是CSS常用基本样式和属性。
#box1{
width:350px;
height:350px;
background: #f00;
border: 10px solid #000;
font-size: 16px;
color: yellow;
font-weight: bold;
font-family: "宋体";
line-height:32px;
font-style: italic;
text-indent: 2em;/*首行缩进：1em=一个文字大小*/
text-align: left;/*对齐方式*/
text-decoration: underline;/*文字修饰：through-line(删除线)、overline(上划线)、underline(下划线)、none*/
word-spacing: 6px;/*词间距*/
letter-spacing:5px;/*字母间距（字间距）
*/
}
以下是练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易新闻小实例</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:419px;
background: url(bg.png) 0 0 no-repeat;
margin: 0 auto;
}
li{
font-family: "宋体";
font-size: 12px;
line-height: 24px;
list-style: none;
padding-left:52px;
vertical-align: middle;
}
.title{
height:32px;
padding:6px;
}
.con1{
height:58px;
padding-top: 10px;
}
.con2{
height:126px;
}
.con3{
height:78px;
}
.con4{
height:128px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="title"><h5>网易产品</h5></li>
<li class="con1">免费邮 VIP邮箱 企业邮 邮箱大师 易信</li>
<li class="con2">梦幻西游2 新大话2 新大话3 藏地传奇 魔兽世界 星际争霸II 倩女幽魂2 武魂2 天下3 突击英雄 新飞飞 大唐无双零 天谕 英雄三国 龙剑 乱斗西游 炉石传说 UU加速</li>
<li class="con3">考拉海购 LOFTER 博客 相册 花田交友 约会 女神 跟帖 抢购 CC语音 BoBo直播</li>
<li class="con4">彩票 理财 商城 贵金属 电影票 车险 有道词典 翻译 云笔记 印象派 公开课 云课堂 读小说 云音乐 火车票 游戏助手 公正邮 应用 杂志 新闻客户端 大学慕课 </li>
</ul>
</div>
</body>
</html>
运行结果：
第1天：CSS基本样式的更多相关文章
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- CSS Reset样式重置
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...
随机推荐
- JavaWeb 后端 <二> 之 Servlet 学习笔记
一.Servlet概述 1.什么是Servlet Servlet是一个运行在服务器端的Java小程序,通过HTTP协议用于接收来自客户端请求,并发出响应. 2.Servlet中的方法 public v ...
- Python-Flask：利用flask_sqlalchemy实现分页效果
Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, ...
- js实现日期格式化
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- vue路由跳转时判断用户是否登录功能
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...
- 使用pillow生成分享图片
重复性的工作一定要交给计算机去做! 有时候要为公司做一张宣传用的分享图片,很简单交给设计通过ps.AI做好就行了,但是如果一个网站要为每个用户生成一张专属的分享图片,如果让设计师一张一张的去做,哪设计 ...
- laravel+vue组合的项目中引入ueditor(打包成组件形式)
前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入. (本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇博客,链接: http: ...
- 奔跑在Docker上的Spark
转自:马踏飞燕--奔跑在Docker上的Spark 目录 为什么要在Docker上搭建Spark集群 网络拓扑 Docker安装及配置 ssh安装及配置 基础环境安装 Zookeeper安装及配置 H ...
- 1010: [HNOI2008]玩具装箱toy [dp][斜率优化]
Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...
- Memcached的基础梳理
1 .Memcached 概念 官方解释如下: What is Memcached? Free & open source, high-performance, distributed mem ...
- ajax请求原理
首先分析使用ajax时候有那些不确定的因素 请求:1 请求的方式不确定 2 请求的地址不确定 3 请求是否异步不确定 4 发送的数据不确定 响应:5 返回的数据不确定 6 响应成功之后 需要处理的业务 ...