CSS样式上机练习

html-css014

CSS样式上机练习,第1张

你要是去找出来都能写完了。首先拍拍公告我没有用过不知道这个网站,但是一般线上的项目里面的代码没有你刚刚学的这么简单的,还有有一些css样式是通过js写的,你看不到的,还是自己先考虑一下应该怎么写,实在不会的再问别人,这是作为你的前辈给你的忠告。不要等到毕业了再去后悔当初没有好好学

你犯的错误是:将class名的选择器用"#"开头,用”.“才对,另外你的class名有点非主流。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CCS 选择器 上机练习1</title>

<style>

#list {

width: 200px

font-size: 12px

background: #ccc

}

#list .title {

color: #ff7300

font-size: 14px

}

</style>

</head>

<body>

<div id="list">

<ul>

<li class="title">家用百货</li>

<li>大家电</li>

<li>洗衣机</li>

<li>电冰箱</li>

<li>平板电脑</li>

</ul>

<ul>

<li class="title">日用百货</li>

<li>肥皂</li>

<li>洗衣粉</li>

<li>纸巾</li>

<li>洗发水</li>

</ul>

</div>

</body>

</html>

题外话:

1.将来不想失业就别作弊,这个太基础了。

2.你的代码缩进太非主流了,这是态度问题。我是老板一定不要你,是老师一定体罚你。

3.出题的人不专业啊,这里用自定义列表才更语义化,附代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CCS 选择器 上机练习1</title>

<style type="text/css">

* {

padding: 0

margin: 0

}

#list {

padding: 10px 15px

background: #ccc

font-size: 12px

width: 200px

}

#list dt {

font-size: 14px

color: #ff7300

margin: 5px 0

}

</style>

</head>

<body>

<dl id="list">

<dt>家用百货</dt>

<dd>大家电</dd>

<dd>洗衣机</dd>

<dd>电冰箱</dd>

<dd>平板电脑</dd>

<dt>日用百货</dt>

<dd>肥皂</dd>

<dd>洗衣粉</dd>

<dd>纸巾</dd>

<dd>洗发水</dd>

</dl>

</body>

</html>

许多人都开始学习CSS,但又不知从何入手,所以此文就是给那些初学者所写,带他们踏上CSS列车。 一. CSS学习重在方法! 学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法! 要想掌握CSS, 首先要学会HTML,因为一个样式它是不可能脱离HTML页面的,HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子,然后让你上机测试效果,这是笔者想让你有对样式表CSS有一个初步的印象,告诉你CSS能做什么。一个小例子:“麻雀虽小,五脏俱全”,你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式,以后在实践中不断地用,不断用的过程就是不断记的过程,所以不能恢心,不能总认为自己记忆力不好,但不管你骑的是牛也好,千里马也罢,只要有恒心,一定会到达终点的。 阅读一本书,一般来说第一次要先把整个书通读一遍,不理解的也要往下看,在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象,但一定有很多不明白的地方,没关系,继续往下看。 第二遍你就要边看边做学习笔记了,把你认为是重点的部分写上,还有,你觉得有疑问的部分也要记下,带着疑问看下去,如果没有答案,你可以去BBS上发一个贴子,好心人还是很多的,提示一句:“一定要学会如何去问问题!” 这里就不说了。你还要上机去练习书上的例子,最让你困惑的:“一是记不住,二是对概念的理解有误(这一条可能是书译的不好,另外就是你的理解不对)”,对于第一条你就要树立信心,坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了,努力了就会有回报,有结果。 有好多人也看了,但是没有什么进步,分析主要有以下几个原因: 原因一:压力不够,因为有不少人比如美工学CSS,因为是看别人学,所以学之,不学就没优势!这样的压力是很小的,学不好还有美工这碗饭。 原因二:只是业余学习,这样学还只是玩一玩,因为你不一定非要以这门技术吃饭。 原因三:方法不对,有的人只是在看教程,但他不动手去做,我以前就是看的太多,做的太少,所以有了实践你才能把理论的东西揉进去。 二. 掌握CSS的四个学习阶段 学CSS可以分成以下几个阶段: 阶段一:不去想浏览器的兼容性问题的情况下能做出页面,但页面里到处用TABLE的 模式DIV写出的页面。 阶段二:想到了兼容性问题,但无法提前预防,只会修补问题,大量使用HACK技术(我对HACK技术只是知道,但用的很少) 阶段三:可提前预防BUG,但样式表中大量应用了ID,CLASS,CSS译过来是重叠样式表,比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN,这样写就可以定义SPAN的样式了,不用在SPAN中加入CLASS了。这也就是CSS的优点所在,为什么不好好利用而一定要定义一个CLASS呢! 阶段四:这一阶段是最难的,良好的HTML语义结构、合理的CSS、可重复利用的样式。