HTML+CSS编写静态网站-34 为Contact页面添加样式
来源:互联网 发布:丝绸之路发展历程 知乎 编辑:程序博客网 时间:2024/05/18 06:23
视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015首先,我们来对无序列表进行一些基本的调整。我们将删除项目符号,然后增加填充和边距,以及调整字体大小。所以来到CSS中,让我们在PAGE ABOUT下添加一个新的多行注释PAGE CONTACT。/* **************************************PAGE CONTACT************************************** */现在,我们可以添加我们的样式。我要选择.contact-info。List-style设置为none,padding设置为0,margin:0,最后将字体大小设置为0.9 em。/* **************************************PAGE CONTACT************************************** */ .contact-info{ list-style:none; padding:0; margin:0; font-size:0.9em;}所以让我们切换回浏览器并观看这个列表,看看是什么样的。接下来,我将为每个列表项添加背景图像。所以,我要选择每个列表项,并添加img文件夹中包含的图标。这和以前添加图像的方法略有不同,因为我们想展示给大家各种图像包含技术。所以首先,我们需要选择contact-info列表,然后选择li,然后在li后面.phone。这里没有空格。因为phone是li的class,而不是嵌套在li列表中的元素。最后,我们要选择里面的a元素。所以,这就会选择class为phone下面的a元素。现在,我们输入属性background-image,然后我们将使用一个特殊值URL,因为我们需要添加一个URL。这个URL将是我们图像的路径。在URL后面的括号内,我们需要添加两个单引号来保存URL,然后我们将键入两个点,一个斜杠,img,然后是phone.png,.contact-info li.phone a{ background-image:url(../img/phone.png);}这两个点可以让我们回到当前目录的上一个目录,这将使我们到这里的根文件夹,然后我们可以回到img,最后找到phone.png。这就是相对路径。接下来,让我们复制并粘贴,我们将粘贴这两次。所有我们需要做的是将class更改为mail和twitter,然后我们需要将图像的名称更改为mail和twitter。.contact-info li.mail a{background-image:url(../img/mail.png);}.contact-info li.twitter a{background-image:url(../img/twitter.png);}所以我们会保存一下。刷新页面:您可以看到这里有一些灰色的方块,实际上,他们应该是在文本左边,所以。我们需要在这里添加一些间距。所以我们再回到css代码。我们说,contact-info,并选择a元素,我们将display设置为block。最小高度设为20px。背景重复属性设置为不重复。背景大小属性设为20像素和20像素。然后填充设为0 0 0 30px。最后将边距设置为0,0和10像素.contact-info a{ display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin:0 0 10px;} .contact-info li.phone a{ 这里有很多代码。我们来一一解释。我们已将display设置为block。这意味着在这种情况下,我们每个图像将占据空间。这将给我们更多的空间来使用,以便我们的图像有一个实际显示的地方。接下来,我们将每个项目的最小高度设置为20像素。这是我们的图标完全可见的最小高度。接下来,我们设置了另外两个背景属性background-repeat和background-size。默认情况下,CSS中的背景图像将始终重复,但是我们希望这些背景只显示一次。所以我们将背景设置为不重复。接下来,background的size属性将调整为背景大小。接下来,我们设置了填充。对于填充,我们希望在元素左侧空出额外的空间,因为我们的图像将放在这些链接的左侧。所以因为在左边有一个填充,这将给图像一个显示的地方。最后,我们在底部添加十个像素的边距,以使我们每个链接之间垂直的分离开。保存并刷新。所以,这是关于我们的Contact页面。接下来,我们将会学习如何使我们的网站在各种屏幕分辨率(如桌面和平板电脑)上工作。然后我们将网站放到网上。最后,我们将学习如何解决一些可能遇到的常见错误和错误。更多精彩内容尽在视频中!本文固定链接:http://www.oxox.work/web/html-css/contacts-style/ | 虚幻大学
查看原文:http://www.oxox.work/web/html-css/contacts-style/
阅读全文
0 0
- HTML+CSS编写静态网站-34 为Contact页面添加样式
- HTML+CSS编写静态网站-32 为关于页面添加样式
- HTML+CSS编写静态网站-33 创建Contact页面
- HTML+CSS编写静态网站-03 添加css样式
- HTML+CSS编写静态网站-31 添加About页面
- HTML+CSS编写静态网站-13 包含外部css样式
- HTML+CSS编写静态网站-26 创建画册样式
- HTML+CSS编写静态网站-10 添加画册结构
- HTML+CSS编写静态网站-11 添加画册图像
- HTML+CSS编写静态网站-24 调整页面文本
- HTML+CSS编写静态网站-39 调整About页面
- HTML+CSS编写静态网站-22 组织css文件并添加注释
- HTML+CSS编写静态网站-29 改变链接和页脚样式
- CSS-为网站添加样式---第三系列
- HTML+CSS编写静态网站-38 Vedio页面适配桌面布局
- HTML+CSS编写静态网站-15 什么是CSS
- HTML+CSS编写静态网站-20 CSS颜色属性详解
- HTML+CSS编写静态网站-05 HTML的含义
- Java StringBuffer 和 StringBuilder 类
- [Thinking in java]理解java三大特性之一继承
- brew install idutils=》Error: undefined method `rebuild' for #<BottleSpecification 解决方法
- DxO OpticsPro 11.4.2.12306 Windows 简体中文 汉化版 送4部教程
- [Amazon] Add Two Numbers I(II)
- HTML+CSS编写静态网站-34 为Contact页面添加样式
- [LeetCode]237. Delete Node in a Linked List
- 转摘 MYSQL 增加缓存后提升写入速度
- Java Executors(线程池)
- 409. Longest Palindrome
- RxJava操作符
- 毕业设计基于OpenCV的图像特征提取软件的设计与实现,部分展示
- 第一类斯特林数求自然数幂和学习小记
- 声明列数待定的数组