关于用css样式画面包超人的信息

用css+html 做出如图效果

有很多种方法，这里来为你演示其中一种（假设你的外层框架宽为：600像素；高为90像素）

CSS样式如下：

style type="text/css"

div {width:600px; height:90px; background:url(图片文件夹/图片文件名)}

ul {width:375px; margin:15px auto; padding:0; list-style:none; font:bold 16px/3 simsun}

ul li {float:left}

p {clear:both; font-size:12px}

.orange {color:orange}

/style

DIV编写如下：

div

ul

li class="orange"首页/li

li丨/li

li公司介绍/li

li丨/li

li新闻中心/li

li丨/li

li产品中心/li

li丨/li

li联系我们/li

/ul

p字字自作自字字字字字字字自作自字字字字字字字自作自字字字字字字字自作自字字自作自字字字字字字字/p

/div

直接复制以上代码就行了。

相关问答

Q1: 如何使用CSS

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

#para1

{

text-align:center;

color:red;

}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

实例

.center{

text-align:center;

}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center{

text-align:center;

}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

Q2: 使用CSS画胡子

如果想要使用CSS绘制胡子样式，这要怎么画？下面本篇文章就来给大家介绍一下使用CSS绘制胡子效果的方法，希望对大家有所帮助。

绘制胡子的步骤：

步骤1： 创建一个黑色圆，圆角半径为50％，宽度和高度为180px

为了保持圆在中间，在左边加350px；为了要使圆可见，可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标，以便自动更改背景。

效果图：

步骤2： 使用box-shadow添加框阴影，使页面中间有两个圆

css样式

效果图：

步骤3： 使用::before元素添加左胡须

●　将::before元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使左胡须末端准确到达，然后以-40度角旋转。

添加.mustache::before样式

效果图：

步骤4： 使用::after元素添加右胡须

●　将::after元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使右胡须末端准确到达，然后以40度角旋转。

添加.mustache::after样式

效果图：

更多 web开发 知识，请查阅 HTML中文网 ！！