专栏首页前端知识分享第1天:CSS基本样式

第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 条评论
登录 后参与评论

相关文章

  • 第58天:简单焦点轮播图

    半指温柔乐
  • 第42天:焦点图

    半指温柔乐
  • 第21天:京东页面轮播图

    半指温柔乐
  • div边框重叠,像素变粗,解决方法 原

    如左图所示,靠在一起的div,由于边框紧挨着,显得粗,很不美观,如何变成后面正确显示,解决方法

    tianyawhl
  • 负margin在页面布局中的应用

    在页面中经常会遇到两列的情况,比如说左侧栏固定宽度,右侧栏自适应宽度,此时可以用flex布局的方式,但是这种方式在ie8上不兼容,但是也可以用table。这里我...

    无邪Z
  • python练习题-day12

    (3) 求M中3,6,9组成的列表M = [[1,2,3],[4,5,6],[7,8,9]]

    郭耀华
  • python基础知识练习题(二)

    2、利用下划线将列表的每一个元素拼接成字符串,li = ['alex','eric','Witharush']

    py3study
  • jquery入门

    周小董
  • 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

    Sb_Coco
  • 纯CSS编写三级导航菜单-附源码

    在我们日常浏览网站过程中,会发现每一个网站都会有导航栏,导航栏是做什么的?在一个网站中具有怎么样的意义呢?我们先来了解一下这个问题。

    申霖

扫码关注云+社区

领取腾讯云代金券