HTML+CSS编写静态网站-26 创建画册样式

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
到目前为止，我们已经编写了HTML，重构了CSS，添加了基础样式，比如，一些颜色和排版。这些所有的操作都是为了制作手机网站。这节课，让我们来构建我们的画册。
首先，我们来重新查看我们的index.html，我们的画册现在是由无序列表构建的。这里，我们有ul无序列表容器，其中有li列表项。每个列表项由一个链接组成，在链接内部是一个图像及它对应的描述。
在我们的页面上有多个无序列表，所以，现在，让我们为这个列表添加一个ID，以便我们在css中可以识别这个列表。我把id设为gallery。也就是画册的意思：

现在，让我们在保存html文件，然后跳转到我们的CSS，让我们开始为我们的画册创建样式。这个画册将在我们的手机网站上占据两列。后面的课程中，当我们创建桌面网站时，我们会将它扩展为三列。所以，首先我们需要在我们的网站上添加一些特殊的样式。因为你看，我把Chrome缩小到只有手机一样的宽度，这里的文本都没有问题，但是我们的图像实在是太大了。所以，我们现在就来修改它。为了修复我们的图片，我们将在CSS的GENERAL部分给他们最大宽度为100％。所以，我们来到GENERAL部分的a标签下面，输入img，max-width:100％，实际上，这是一个全局的图像宽度设置：

a { text-decoration : none; } img{ max-width: 100%; }

实际上，这个最大100％的宽度指的是图像对应的父容器所能填充的最大宽度。如果容器尺寸缩小，那么图像也将随之缩小。如果没有这个设置，图像可能会超过它们父容器100%的宽度，就像我们之前的这样。现在，我们保存，然后打开index.html：你看这里图像的宽度，就根据它的父容器body的变化而变化了。接下来，让我们对图库进行风格设计。我要创建一个新的CSS部分称为PAGE VEDIO。这样我们就知道在这个注释下面的样式是用于VEDIO页面，并不会被其他页面使用。所以，我要复制我们的多行注释，然后，在COLORS的注释上方，粘贴，我把这个页面叫做PAGE VEDIO：

/* ************************************** PAGE VEDIO ************************************** */ /* ************************************** COLORS ************************************** */

现在，我们将选择gallery元素并应用一些样式。因此，我们将使用id选择器，margin设置为零。padding设置为零。并将list-style设置为none：

/* ************************************** PAGE VEDIO ************************************** */ #gallery{ margin:0; padding:0; list-style:none; }

这里的新属性是list-style。这里我们将其设置为none，这就会删除列表中任何种类的项目符号。现在，我们来对列表项应用样式。我们希望将列表项分为两列。所以，我要选择gallery，然后选择gallery里面的li。往左浮动。我们将它的宽度为45％，边距为2.5％，背景颜色为f5f5f5，最后颜色为bdc3c7：

#gallery{ margin:0; padding:0; list-style:none; } #gallery li{ float:left; width:45%; margin:2.5%; background-color:#f5f5f5; color:#bdc3c7; }

我们先看下效果，保存，然后刷新页面：你看，现在的画册形成了两列的布局。而且，如果我们拉宽页面，效果也非常好。那么首先，这里的float是一个很重要的属性，它是一个允许我们以特殊方式定位元素的属性。如果没有这个浮动属性，那么这里的画册就只会显示一列，它不是浮动的。接着，我把它们的宽度设置为45％。也就是说，无论浏览器窗口的大小是在桌面设备还是手机上的大小，每个图片只占用其父容器的总宽度的45％。所以，你看，无论浏览器窗口如何缩放，这些图像只占据45％的宽度。这里我们有2个45，总宽度为100，那么。余数为10.这意味着我们将有两个图像并排浮动，而且有10％的额外空间，我们可以把这10%用来创建我们的图像之间的空间。为了创建这个空间，我已经使用margin属性，并将其设置为2.5％。因此，如果我们回到浏览器窗口，您可以看到每个图像在它们的2边都有2.5％的边距，刚好4边*2.5%，也就是10%。这将填补额外的10％的空间。最后，我将背景颜色设置为中灰色。如果你看我们的网站，你会发现列表项文本的后面都是灰色。最后，我在这里设置我们的文本的颜色为灰色。这在网站上不会显示出来，除非这里的C++，Github不是以链接的形式出现。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/photo-style/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/photo-style/

HTML+CSS编写静态网站-26 创建画册样式相关推荐

使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
Vue3+TS+Vite开发组件库并发布到npm 网站在线预览: Vue Amazing UI | Amazing UI Components LibraryAmazing UI 组件库https:/ ...
使用HTML CSS制作静态网站【中秋节】
CSS编写静态网易注册界面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML+CSS美食静态网站设计【海鲜网站】web结课作业的源码 web网页设计实例作业
雨果vs杰基尔：静态网站生成器主题的史诗般的战斗
In this article, we'll compare the nuances of creating themes for the top two static site generators ...
uniapp 微信云开发静态网站和云函数跳转小程序
uniapp 微信云开发静态网站和云函数跳转小程序云开发静态网站的创建云函数及copy-webpack-plugin 安装copy-webpack-plugin可能遇到的问题静态网站和云函数的搭 ...
用HTML+CSS编写一个计科院网站首页的静态网页
用HTML+CSS编写一个计科院网站首页的静态网页利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录最终效果 <!DOCTYPE ...
HTML+CSS+JS网页设计期末课程大作业：音乐在线网站设计——音乐在线听平台网站(26页) 网页设计成品DW静态网页Html5响应式css3
HTML5期末大作业:音乐在线网站设计--音乐在线听平台网站(26页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...
创建hugo博客_Hugo + Firebase：如何在几分钟内免费创建自己的静态网站
创建hugo博客 by Aravind Putrevu 通过Aravind Putrevu Hugo + Firebase:如何在几分钟内免费创建自己的静态网站 (Hugo + Firebase: H ...

HTML+CSS编写静态网站-26 创建画册样式

HTML+CSS编写静态网站-26 创建画册样式相关推荐

最新文章

热门文章