第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>

运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

mask遮罩层的华丽写法

21120
来自专栏程序员互动联盟

【专业技术】css 3D transform 感性理解

一、首先,情感化认识 CSS3中的3D变换效果,其实就是现实中姿势的变换; 虽然都是成年人,但考虑到仍有不少窝中待守的雏鸟,如果上面的解释想不过来,就想想以...

29270
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

24550
来自专栏前端笔记

【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题

“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。” —— James Anderson 难题 在 CSS 中对元素进行水平居...

29980
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

42020
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

17330
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

41330
来自专栏前端新视界

视差滚动技术的简介及运用

维基百科地址:https://en.wikipedia.org/wiki/Parallax_scrolling 视察滚动是计算机图形学以及网页设计中的技术。原理...

27960
来自专栏IMWeb前端团队

细谈设计稿还原

按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。 首先一个网站落到PS中,都是图片或文字(附加对...

20670
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

9020

扫码关注云+社区

领取腾讯云代金券