电子商务商人需要知道的9个CSS代码

2021年2月24日03:47:19 发表评论 31 次浏览

虽然CSS代码比HTML复杂得多, 它最终使商家在网站的格式和样式上具有更大的灵活性。对级联样式表的基本了解可以为网站上的文本和图像功能开辟新的可能性。将照片嵌入网站, 在此处添加链接或在其中添加按钮, 制作表格等等。

如果你习惯使用HTML, 则会立即注意到更复杂的CSS代码。但是这种复杂性使你网站的美学外观更加复杂。

这里是九个简单的CSS代码的列表, 它们可以增强大多数网站的功能。

1.嵌入图片

要嵌入图像, 你将使用下面的代码行, 并根据你的规范调整某些元素。

<html>
 <style type="text/css">
body
{
background-image:url('http://photography.naturestocklibrary.com/orca-stock-photo.jpg');
background-repeat:no-repeat;
background-position:center;
margin-right:200px;
}
</style>
</html>

这就是代码在外行看来的含义:

  • 背景图片:url是指向你想要嵌入的图像的CSS属性。在此示例中, 我使用了逆戟鲸的股票照片。
  • 背景重复:不重复表示图像只能出现一次。
  • 背景位置:中心表示图像将出现在网页的正中央。例如, 你可以使用"右上"或"左下"进行调整。
  • 右边距:200px表示图片与页面右侧的其他对象之间应有多少页边距, 在本例中, 我们将此图片设置为200像素页边距。

2.在文本周围添加边框

使用下面的代码在文本周围添加边框。

<html>
 <style type="text/css">
p.one 
{
border-style:solid;
border-width:5px;
}
</style>
</head>
<body>
<p class="one">Sample border one.</p>
</body>
</html>
  • 在此示例中, 我们创建了一个5像素厚的边框。
  • 第一个引用了段落标签, p班, 位于代码底部。因此, 请输入要显示在边框内的文本p班线。在此示例中, 我们编写了"示例边框一"。
  • 边框样式:实心表示我们使用的边框类型。此示例设置为"实心", 但是这里有很多可能性, 从"虚线, 双精度, 插入, 隐藏"到"虚线", 尝试所有方法, 看看最适合你的网站。
  • 边框宽度:5px表示边框(无论样式如何)将为5像素厚, 只需将其值更改为更大或更小的数字即可进行调整。

这段代码创建了一个看起来像这样的边框:

文字边框

3.制作图片库

一个简单的图片库使用下面的这个看起来很复杂的代码。

<html>
 <style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid blue;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid blue;
}
div.img a:hover img {border: 1px solid yellow;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" alt="电子商务商人需要知道的9个CSS代码" alt="Orca" width="110" height="90" /></a>
 <div class="desc">Orca Test Text</div>
</div>
<div class="img">
 <a target="_blank" href="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg"><img src="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg" alt="电子商务商人需要知道的9个CSS代码" alt="Trees" width="110" height="90" /></a>
 <div class="desc">Trees Test Text</div>
</div>
<div class="img">
 <a target="_blank" href="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg"><img src="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg" alt="电子商务商人需要知道的9个CSS代码" alt="Rocks" width="110" height="90" /></a>
 <div class="desc">Rocks Test Text</div>
</div>
</body>
</html>
  • 边距:2px;边框:1px纯蓝色;高度:自动;宽度:自动;向左飘浮;文本对齐:居中;–该代码的最上段指示边框的属性, 高度, 宽度, 画廊更大边框内的图像对齐方式。
  • 显示:内联;边距:3px;边框:1px纯蓝色;–这第二段代码定义了图像周围边框的颜色和粗细。
  • div.img a:悬停img {边框:1px纯黄色}段表示当鼠标悬停在图像上方时, 我们希望图像周围有一个1像素的黄色实线边框。
  • 文本对齐–边距–此段指示图像下方显示的文本说明。
  • 下一个较大的部分是我们画廊中每个图像的代码说明。本示例使用三个独立的库存图像, 并使它们使用传统HTML代码作为超链接进行链接。
  • <a target="_blank" href="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"> <img src =" http://photography.naturestocklibrary.com/orca-stock-photo。 jpg" alt =" Orca" width =" 110" height =" 90" /> </a> <div class =" desc"> Orca测试文字</ div>–这是我们画廊中第一张图片的代码段。每张图片都会重复此操作, 只是每行中图片的位置和名称都会更改。

此代码创建一个具有以下效果的基本库:

基本图片库

4.更改背景颜色

你可以使用以下代码轻松调整任何网站页面的背景颜色:

<html>
 <style type="text/css">
body
{
background-color:pink;
}
</style>
</html>
  • 背景颜色:粉红色表示整个页面应为粉红色。你可以使用HTML颜色代码或英语单词作为颜色, 尽管在使用单词时, 你会限于显示的颜色范围。

5.更改文本链接的样式

使用CSS, 链接可以变得更加动态。你可以更改已访问和未访问链接的颜色, 以及鼠标悬停或用户单击链接时的颜色。

<html>
 <style type="text/css">
a:link {color:red;}    /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:yellow;}   /* mouse over link */
a:active {color:purple;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Link Text</a></b></p>
</body>
</html>
  • a:link {color:red;} / *未访问的链接* /–此行表示对于未访问的链接, 超链接文本的颜色为红色。
  • a:访问过{color:blue;} / *访问了链接* /–此行表示对于已访问的链接(已单击的链接), 超链接文本的颜色将变为蓝色。接下来的几行遵循该逻辑, 为访问的链接(用户已经单击的链接)提供颜色, 将鼠标光标悬停在链接上时提供颜色更改, 然后在单击时将链接更改为颜色。

6.文字格式

文本格式也可以使用CSS进行。下面的代码涵盖了普通, 斜体和粗体文本样式。

<html>
 <style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.bold {font-weight:bold;}
</style>
<body>
<p class="normal">Normal style text.</p>
<p class="italic">Italic style text.</p>
<p class="bold">Bold style text.</p>
</body>
</html>
  • p.normal {font-style:normal;}–此行代码指示应如何在代码底部的标题为"普通"的段落中显示文本–p class =正常, 在这个例子中, 文字没有样式, 很简单。对于下一行也是如此斜体和粗体两者均指示相应段落的文本应如何显示, 分别为斜体和粗体。

以下是各种文字样式的示例:

文字样式

7.列出清单

可以使用列表中项目符号的数十种不同形状, 字母或数字来完成列表的创建。

<html>
 <style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
ol.d {list-style-type:decimal;}
</style>

<body>
<ul class="a">
<li>Example 1</li>
<li>Exampe 2</li>
<li>Example 3</li>
</ul>

<ul class="b">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

<ul class="c">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

<ol class="d">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
</body>
</html>
  • ul.a {list-style-type:disc;}–此行表示我们要创建的列表名为" a", 并且使用的是"光盘"形状的项目符号。接下来的行表示名为" b, c"和" d"的其他示例列表将使用这些项目符号样式"圆形, 正方形"和编号"十进制"。
  • 每个示例列表之前的" ul类"给出了打开说明所指向的名称, 并且每一行将使用这些说明中指示的项目符号进行格式化。
  • 每条"示例"行之前和之后的" li"标签表示这是列表中的一行。

各种项目符号样式的示例:

子弹样式

8.制作一个导航栏

导航栏也很容易创建。此示例制作了一个由四个水平按钮组成的横条, 以帮助用户浏览到站点的各个页面。

<html>
 <style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link, a:visited
{
display:block;
width:120px;
font-weight:bold;
color:white;
background-color:red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active
{
background-color:pink;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
  • 此代码创建带有粉红色文本选项的红色条。当鼠标光标悬停在任何按钮上时, 该条的红色部分变为粉红色。
  • 因为我们在每种情况下都将"页边距"和"填充"设置为" 0", 所以它显示为单个实心红色条(而不是四个单独的按钮)。边距处理元素周围的边框, 填充区处理元素周围边框之外的空间。两者都设置为" 0"时, 元素并排显示, 没有空间, 形成了实心条的外观。
  • "浮动"行表示此栏在页面上将保持对齐。
  • 下一个代码块指示我们希望条形图显示为宽度为120像素的红色块, 文本颜色为白色, 每个单词和所有大写字母之间填充4个像素。
  • 代码"悬停"和"背景颜色"的单行旁边表示鼠标光标悬停处于活动状态, 当用户将鼠标悬停在按钮上时, 颜色变为粉红色。
  • 最后一块包含将出现在按钮栏中的文本, 此示例中使用的是"家庭, 产品, 联系人, 关于", 但是可以将其更改为所需的任何文本。

完成后, 导航栏将如下所示:

电子商务商人需要知道的9个CSS代码1

9.制作网页的可打印版本

下面的代码使你可以在打印网页时更改其外观。在下面的示例中, 网站使用" arial"字体, 并且在打印时使用" times"字体。对于两个视图, 字体大小保持为12点。

<html>
 @media screen
{
p.bodyText {font-family:arial;}
}

@media print
{
p.bodyText {font-family:times;}
}

@media screen, print
{
p.bodyText {font-size:12pt}
</html>
  • @媒体每行的规则表示文本的外观, 具体取决于查看位置。当与"屏幕"结合使用时, 这表示文本应使用" arial"字体。当与"打印"组合使用时, 这表示在打印时, "时间"字体应替换" arial"字体。最后一行"屏幕, 打印"表示在屏幕和打印中, 字体大小将保持12点。
一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: