霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

网页设计师修炼练习题007

要求:按照上图效果,运用DIV+CSS结构,浮动功能,100%还原制作出来。整个灰底区域相对于页面水平居中。

知识点:浮动;清除浮动。

提示:

...

约束的设计,盒子里的思考

人们关于设计的基本组成部分,一般谈论的很少,很多时候我们认为设计是没有规则的,所以谈到设计,讲的最多的是创新和创意。但是事实上,除了创意以外,设计中很大的一部分都被各种规则和项目理念约束着,设计师能做的思考,就像在固定的盒子里进行有限的改变。

这些条条框框会规范细节的一致性,帮助品牌建立统一的视觉形象和发展方向。还会影响许多形式的表现,不管你喜欢这些约束还是讨厌它们,它们都是你将必须面对的。

但好消息是:这种约束实际上可以帮助你成为一个更好的设计师。

画布和宽高比

...

CSS3选择器之属性选择器

CSS3中,增加了如下三个属性选择器,使属性选择器有了通配符的概念,十分方便!

【注】下面所描述的attr和val分别表示属性和值

[attr*=val]属性选择器

概述:表示筛选出属性attr中包含属性值val所制定的字符的话,那么将选择此元素。

案例:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器之属性选择器-霍者网页设计博客(www.huozheweb.com)</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                div{font-family:"Microsoft yahei";}
                [id*=abc]{margin-right:10px; width:200px; height:200px; text-align:center; font-size:24px; color:#fff; background:#900; float:left;}/*此选择器表示选择id包含字符串abc的元素*/
        </style>
    </head>
    
    <body>
            <div id="ab">我的id是ab</div>
            <div id="abc">我的id是abc</div>
            <div id="w3cabc">我的id是w3cabc</div>
            <div id="w3cabc123">我的id是w3cabc123</div>
            <div id="ac">我的id是ac</div>
    </body>
</html>

[attr^=val]属性选择器

...

word-wrap&word-break的区别

我们在块级元素中输出英文,你不会发现有问题的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>word-wrap and word-brak</title>
</head>
<style>
.box { width:1000px; height:300px; background-color: #FF0000;}
.box p { width: 200px; height: 100px; background: #FFE4C4;}
</style>
<body>
<div class="box">
<p>word-wrap and word-brak the difference</p>
</div>
</body>
</html>

当出现一个单词的长度过长时,你会发现它冲出了块级元素。

...