HTML+CSS编写静态网站-32 为关于页面添加样式
来源:互联网 发布:linux 查看外网ip 编辑:程序博客网 时间:2024/05/17 14:27
视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015现在,我们来到CSS中添加样式,这里,我在COLORS的多行注释上创建一个新的注释,因为我们要为新的页面添加样式。所以说:PAGE:ABOUT:/* **************************************PAGE ABOUT************************************** */ /* **************************************COLORS************************************** */然后,我们为网站logo添加样式,所以指定.profile-photo。我要设置display为block。Max-width设置为150px,margin顶部为0,左侧和右侧为auto,底部为30px,border-radius设为100%:/* **************************************PAGE ABOUT************************************** */ .profile-photo{ display:block; max-width:150px; margin:0 auto 30px; border-radius:100%;}将display设置为block,将允许我们使用自动边距将元素在页面上居中,默认情况下,图像显示在一行,但我们不希望此图像与其余文本在一行显示。所以,我们设置它是block。然后,我们设置图像的最大宽度为150个像素,它可以变小,但我不希望它超过150像素。最后,我们使用了一个名为Border Radius的新属性。也就是:边框半径属性,它允许您向元素添加圆角。您可以以像素为单位对它进行赋值,但这里我使用百分比。我把它设置为100%。这将使我们的圆角最大,实际上我们的照片将是一个圆圈,而不是一个正方形。所以我们来保存它。切换到我们的浏览器,并刷新页面。你看,图片现在是一个圆圈。你可能对圆角设为100%不理解,我们不妨把它设置为20像素:.profile-photo{display:block;max-width:150px;margin:0 auto 30px;border-radius:20px;}保存和刷新:你看,这里就是一个漂亮的小圆角,而不是刚刚的一个完整的圆,好像这个效果更好一些,就用这个设置了。现在,我们为这个页面中添加最后一个样式。我想对第三极标题应用样式,但我不打算把它放在PAGE ABOUT多行注释下。我实际上会把它放在GENERAL下,因为这个h3元素将会在以后应用到其他页面上。所以,设置margin为0,0,1em和0。所以,顶部是0,右边是0,底部是1em,然后左边是0。这将清除h3元素的边距,并在底部添加一些边距,以便将它与其他文本分开一点。img{max-width:100%;} h3{ margin:0 0 1em 0;}所以,如果我们在这里切换回浏览器并刷新,你可以看到间距只是略有不同,但是,当我们进入桌面网站布局时,这一点也会更加明显。更多精彩内容尽在视频中!本文固定链接:http://www.oxox.work/web/html-css/page-style/ | 虚幻大学
查看原文:http://www.oxox.work/web/html-css/page-style/
阅读全文
0 0
- HTML+CSS编写静态网站-32 为关于页面添加样式
- HTML+CSS编写静态网站-34 为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编写静态网站-33 创建Contact页面
- 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的含义
- Android网络API(android.net.http):概览
- C++ STL 一般总结
- 剑指offer——孩子们的游戏
- Android网络API(android.net.nsd):概览
- 关于el5,el6和el7是什么
- HTML+CSS编写静态网站-32 为关于页面添加样式
- ny-95-众数问题
- Android网络API(android.net.rtp):概览
- linux 中的ps命令
- Leetcode: Gray Code
- linux grep命令
- FastDFS实现文件上传下载实战
- gecko需求描述
- Android网络API(android.net.sip):概览