网页页面制做工作经验共享:整洁简约的网页页面

2021-01-20 13:02 jianzhan
谁不期待有1个漂亮而又整洁的网页页面目录?这篇文章内容中大家得出几个好用的事例,你能够把她们立即用到自身的工作中中。大家从1个带有动漫实际效果的竖直目录刚开始,接着是1个图文混排的事例,随后是1个仅有照片的list事例跟1个水平菜单的事例,最终是1个以变大数据开始的目录。针对初学者而言这里能够学到许多物品,针对熟手,立即拿来用便是了。

1.helvetica字体样式的目录
第1个事例的款式看起平平淡淡无奇,但是喜爱简洁设计风格的人或许会感兴趣爱好,这相近于包装印刷字体样式设计风格,简结的另外也不失灵动的特性(当电脑鼠标滑上去的情况下)。注:本人喜爱这里的第2个图文混排的事例,可是发现老外更喜爱第1个,或许这便是文化艺术差别吧。。。
这里是源代码demo详细地址:CodePen
先看实际效果图:

下列是html编码:
<div> /div>
<h2>HelvetiList</h2>
<ul>
<li><a href=<"#"<>Zurich</a></li>
<li><a href=<"#"<>Geneva</a></li>
<li><a href=<"#"<>Winterthur</a></li>
<li><a href=<"#"<>Lausanne</a></li>
<li><a href=<"#"<>Lucerne</a></li>
</ul>
</div>

下列是css编码:
div {
width: 200px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
display: block;
width: 200px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}

/strong>
2.图文混排的Thumbnail List
这是1种在许多网站上都用得较为广泛的目录款式,“图文混排”,图文混排常常比单1的文本更能吸引住人的目光,许多wordpress的blog网站全是用图文混排的板式。
这里是源代码demo详细地址:CodePen.
先看实际效果图:

下列是html编码:
<div>
<ul>
<li>
<img src=<"http://lorempixum.com/100/100/nature/1" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/2" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/3" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src=<"http://lorempixum.com/100/100/nature/4" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
</ul>
</div>

比起上面的事例来,这里的编码要繁杂1些。每一个目录元素都有3个子元素:照片,题目,文本详细介绍。留意照片的尺寸这里需被固定不动为100px乘以100px,要不然加在的照片尺寸不1会使排版错乱,你能够在html编码里强制性设定为这个尺寸。总的来讲完成起来還是较为简易的。
下列是css编码:
* {margin: 0; padding: 0;}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 500px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}

css编码页很简洁明了。大家更改了全部元素的margin和padding。这里只需记牢将照片向左波动,这样文本就会紧挨着跟在后边。
 
3.规范的照片网格 Standard Thumbnail Grid
 
这里是源代码demo详细地址:CodePen.
实际效果图:

下列是html编码:
<div>
<ul>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150x150" /></a></li>
</ul>
</div>

/p>
下列是css编码:
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
div {
width: 900px;
margin: 0 auto;
overflow: auto;
}
ul {
list-style-type: none;
}
li img {
float: left;
margin: 10px;
border: 5px solid #fff;
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}
li img:hover {
-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

这里的关键是给每张照片再加1定的margin随后向左波动,随后用over-flow:auto消除波动(为商业保险起见,用了波动以后1定要消除波动)。给全部网格加上黑色情况,给每张照片再加边框。以便让网格更趣味,我再加了1个电脑鼠标画上去显示信息发光的实际效果。你能够挑选性的应用,无须将这个实际效果用在每个新项目中。
 
4.水平菜单 Horizontal Menu
在这里查询demo和源代码 CodePen.
html编码:
<nav>
<ul>
<li><a href=<"#"<>Home</a></li>
<li class=<"active"<><a href=<"#"<>About</a></li>
<li><a href=<"#"<>Portfolio</a></li>
<li><a href=<"#"<>Contact</a></li>
</ul>
</nav>

css编码:
* {
margin: 0;
padding: 0;
}
nav {
margin: 50px;
}
ul {
overflow: auto;
list-style-type: none;
}
li {
height: 25px;
float: left;
margin-right: 0px;
border-right: 1px solid #aaa;
padding: 0 20px;
}
li:last-child {
border-right: none;
}
li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: #666;
}
li.active a {
font-weight: bold;
color: #333;
}

5.绝大多数字开始的目录 Big Numbers Ordered List
上面详细介绍的全是无序的目录,假如大家要想1个井然有序的目录,在每个目录元素的最开始再加数据能提醒客户这是1个按序排序的內容。假如能将这个数据的款式显示信息的不一样,可能有更好的直观体会。
在这里查询demo和源代码 CodePen.
html编码:
<div>
<ol>
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
</ol>
</div>

css编码:
div {
width: 500px;
margin: 10px
}
ol {
color: #ccc;
list-style-type: none;
}
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}
li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #555;
}
span {
position: absolute;
}

上面便是5个简易而又好用的目录案例,假如你喜爱,能够立即拿去用。