css建设宣传单效果
时间:2021-06-12
本文章向大家介绍css建设宣传单效果,主要包括css建设宣传单效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen">
</head>
<body>
<p><img src="images/logo.gif" alt="Head First Lounge"></p>
<h1>Welcome to the Head First Lounge</h1>
<p>
The Head First Lounge is, no doubt, the biggest trendsetter in Webville.
Stop in to sample the eclectic offering of elixirs, teas, and coffees,
or, stay a bit longer and enjoy the multicultural culinary menu that
combines a harmony of taste, texture, and color with the best in fresh
and healthy ingredients.
</p>
<p>
During your stay at the lounge, you'll enjoy a smooth mixture of
ambient and mystic sounds, filling the lounge and adding an extra dimension
to your dining experience. The decor surrounds you with the relaxing sentiments
of sights from eras past. And, don't forget, the lounge offers free wireless
access to the Internet, so bring your laptop.
</p>
<p id="guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
<p>
But that's not all; at night, join us in the backroom as our resident
DJ spins a choice selection of trance and drum&bass beats across
our spacious tiki-themed dance floor. Or just hang out in one of our
comfy white vinyl booths at the dance bar. You can have your elixirs
delivered from the main lounge right to the dance floor. If you've
had enough of the beat, just head back to the lounge area to relax.
And, no matter where you find yourself in the lounge, you'll always be
connected with our wireless Internet access.
</p>
<p>
Now that you've experienced the lounge <em>virtually</em>, isn't
it time to check us out <em>for real</em>? We're located right
in the heart of Webville, and we've created some
<a href="about/directions.html"
title="Detailed Directions to the Lounge">detailed directions</a>
to get you here in record time. No reservations necessary;
come and join us anytime.
</p>
<div id="div">
<!--标题h2-->
<h2>Weekly Elixir <br />Specials</h2>
<!--共3段
第一段饮料的介绍都包含一个p标签里面有图片信息
图片下方有一个h3标题是饮料名称
在下方是p标签的饮料介绍
-->
<p>
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
</p>
<h3>Lemon Breeze</h3>
<p>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
<!--共3段
第二段饮料的介绍都包含一个p标签里面有图片信息
图片下方有一个h3标题是饮料名称
在下方是p标签的饮料介绍
-->
<p>
<img src="images/chai.gif" alt="Chai Chiller Elixir">
</p>
<h3>Chai Chiller</h3>
<p>
Not your traditional chai, this elixir mixes maté
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
</p>
<!--共3段
第二段饮料的介绍都包含一个p标签里面有图片信息
图片下方有一个h3标题是饮料名称
在下方是p标签的饮料介绍
-->
<p>
<img src="images/black.gif" alt="Black Brain Brew Elixir">
</p>
<h3>Black Brain Brew</h3>
<p>
Want to boost your memory? Try our Black Brain Brew
elixir, made with black oolong tea and just a touch
of espresso. Your brain will thank you for the boost.
</p>
<!--最后一段有一些信息和一个超链接-->
<p>
Join us any evening for these and all our
other wonderful
<a href="beverages/elixir.html"
title="Head First Lounge Elixirs">elixirs</a>.
</p>
</div>
<h2>What's playing at the Lounge</h2>
<p>
We're frequently asked about the music we play at the lounge, and no wonder,
it's great stuff. Just for you, we keep a list here on the site, updated weekly.
Enjoy.
</p>
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
<p id="footer">
© 2012, Head First Lounge<br>
All trademarks and registered trademarks appearing on this site are
the property of their respective owners.
</p>
</body>
</html>
CSS文件
/*为了整体的网页美观,除了这一段的饮料介绍其他的文字
* 是用小号和指定字体还有字间距组成的*/
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}
/*body的h1和 h2也指定了颜色*/
h1, h2 {
color: #007e7e;
}
/*h1的字体大小也指定了*/
h1 {
font-size: 150%;
}
/*h2和h1的字体大小不同所以用了两个*/
h2 {
font-size: 130%;
}
#guarantee {
/*指定guarantee的 行间距*/
line-height: 1.9em;
/*指定guarantee的 字体斜体字*/
font-style: italic;
/*指定guarantee的 字体样式*/
font-family: Georgia, "Times New Roman", Times, serif;
/*指定guarantee的 字体颜色*/
color: #444444;
/*指定guarantee的 盒子边框的颜色*/
border-color: white;
/*指定guarantee的 盒子边框的宽度*/
border-width: 1px;
/*指定guarantee的 盒子边框的风格*/
border-style: dashed;
/*指定guarantee的 盒子背景颜色*/
background-color: #a7cece;
/*指定guarantee的 盒子的内边距*/
padding: 25px;
/*指定guarantee的 盒子的左侧内边距*/
padding-left: 80px;
/*指定guarantee的 盒子的外边距*/
margin: 30px;
/*指定guarantee的 盒子的右侧外边距*/
margin-right: 250px;
/*指定guarantee的 背景图像*/
background-image: url(images/background.gif);
/*指定guarantee的 背景重复问题*/
background-repeat: no-repeat;
/*指定guarantee的 背景的起始位置*/
background-position: top left;
}
#div{
/*指定div的 边框样式*/
border-style: solid;
/*指定div的 边框宽度*/
border-width: 2px;
/*指定div的 边框颜色*/
border-color: #007E7E;
/*指定div的 背景图片*/
background-image:url(images/cocktail.gif) ;
/*指定div的 背景重复问题*/
background-repeat: repeat-x;
/*指定div的 背景宽度*/
width: 250px;
/*指定div的 背景宽度*/
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;
/*指定div的 左侧外边框*/
margin-left: 20px;
/*指定div的 字体距离*/
text-align: center;
/*指定div的 字体间距*/
line-height: 1;
}
/*指定div的 h2颜色*/
#div h2{
color: black;
}
/*指定div的 h3颜色*/
#div h3{
color: red;
}
页面效果
原文地址:https://www.cnblogs.com/tallish/p/14878665.html
- 1592: [Usaco2008 Feb]Making the Grade 路面修整
- Mysql 该如何 Entity Framework 数据库迁移 和 如何更好的支持EF.Extended
- 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛
- 高性能替代反射调用的几种方式
- 1596: [Usaco2008 Jan]电话网络
- 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
- 1647: [Usaco2007 Open]Fliptile 翻格子游戏
- 1295: [SCOI2009]最长距离
- 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课
- 数据结构之哈夫曼树和编码器的构造
- 1578: [Usaco2009 Feb]Stock Market 股票市场
- webp图片实践之路
- 3522: [Poi2014]Hotel
- 3299: [USACO2011 Open]Corn Maze玉米迷宫
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例