CSS美化简单网站首页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网站首页美化版</title>
        <style>
            .top{
                float: left;
                width: 33%;
                height: 65px;
            }

            .amenu{
                color: white;
                text-decoration: none;
                line-height: 50px;
            }

            .price{
                color: red;
            }

            .pot{
                float: left;
                width: 16.66%;
                height: 50%;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="top"><img src="img/6.png"/></div>
            <div class="top"><img src="img/5.jpg"/></div>
            <div class="top" style="line-height: 50px; text-align: center;">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div style="height: 50px; background-color: black; width: 100%;">
            <a href="#" class="amenu"><font color="white">首页</font></a>
            <a href="#" class="amenu"><font color="white">手机数码</font></a>
            <a href="#" class="amenu"><font color="white">鞋靴箱包</font></a>
            <a href="#" class="amenu"><font color="white">电脑办公</font></a>
            <a href="#" class="amenu"><font color="white">香烟酒水</font></a>
        </div>
        <div>
            <img src="img/1.jpg" width="100%"/>
        </div>
        <div>
            <h3>最新商品<img src="img/9.jpg"/></h3>
        </div>
        <div style="float: left; width: 15%; height: 475px; border: 1px;">
            <img src="img/3.jpg" width="100%" height="100%"/>
        </div>
        <div style="float: left; width: 85%; height: 475px;">
            <div style="float: left; width: 50%; height: 50%;">
                <img src="img/7.jpg" width="100%" height="100%"/>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div>
            <img src="img/2.jpg" width="100%"/>
        </div>
        <div>
            <h3>热门商品<img src="img/9.jpg"/></h3>
        </div>
        <div style="float: left; width: 15%; height: 475px; border: 1px;">
            <img src="img/3.jpg" width="100%" height="100%"/>
        </div>
        <div style="float: left; width: 85%; height: 475px;">
            <div style="float: left; width: 50%; height: 50%;">
                <img src="img/7.jpg" width="100%" height="100%"/>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
            <div class="pot">
                <img src="img/8.jpg"/>
                <p>锅</p>
                <p class="price">￥99</p>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div>
            <img src="img/4.jpg"/ width="100%">
        </div>
        <div style="text-align: center;">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">招贤纳士</a>
            <a href="#">法律声明</a>
            <a href="#">友情链接</a>
            <a href="#">支付方式</a>
            <a href="#">配送方式</a>
            <a href="#">服务声明</a>
            <a href="#">广告声明</a>
            <br/>
            Copyright © 2005-2016 传智商城 版权所有
        </div>
    </body>
</html>

原文地址：https://www.cnblogs.com/yxfyg/p/12637229.html

时间： 2024-08-29 22:23:28

CSS美化简单网站首页的相关文章

HTML&CSS——使用DIV和CSS完成网站首页重构

1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内联元素(显示一行).它单独使用没有任何意义,必须结合CSS 来使用.它主要用于对括起来的内容进行样式的修饰. 2.CSS 的作用 HTML:它是整个网站的骨架. CSS:它是对整个网站骨架的内容进行美化(修饰). 3.CSS 如何使用语法和规范选择器{ 属性名 1:属性值 1; 属性

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS的解析差异,需对其进行测试不同浏览器的区别[http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html] 1.IE和FF居中不一样 text-align:center #包中所有文本居中 2.IE指定的最小高度为18px,FF都可以

网站首页布局实战（简单）

跟着教程完成了一个简单的首页制作,没有用js,毕竟是第一个实战,纪念一下 HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="css/main.css" rel="stylesheet" type=&qu

简单的网站首页

<!doctype html> <html> <head> <meta charset="utf-8"> <title>网站首页</title> <style type="text/css"> body{background:url("images/bg.png") top center no-repeat;font-size:12px;font-family:宋

用HTML+CSS编写一个计科院网站首页的静态网页

一.HTML代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 7 </head> 8 <body> 9 <div id="page"> 10 <div id="page_head"> 11 <div i

网站首页蒙灰CSS样式

2020/4/4 全国哀悼日,各大网站首页都变成了灰色,那么如何实现这样的效果呢? 只要添加如下的全局CSS样式即可: html,html *{ filter:gray!important; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms

大前端应用开发与架构设计-使用CSS美化Web站点(一)

大前端应用开发与架构设计-使用CSS美化Web站点(一) 大前端应用开发与架构设计 3.1 CSS概述 CSS(Cascading Style Sheets)即层叠样式表,是用来控制HTML元素的外观样式(例如字体颜色.大小以及元素的定位等等),目前最新的版本是CSS3. 网页中使用HTML+CSS能够实现网页的元素与外观样式分离,也就是HTML只负责页面元素以及语义部分,CSS负责页面的外观样式,这也是W3C组织推荐的做法,尽量使用CSS取代HTML属性,因为如果让HTML既负责页面结构,又要

辛星和您一起用纯CSS美化面包屑导航

首先讲一下面包屑导航为什么叫做面包屑导航,它来自于一个童话故事,这个童话故事的名字也非常有特色,叫做"汉塞尔和格莱特",有一天他们去森林里游玩,但是走着走着发现迷路了,大家都知道,森林里都都是数,不管往哪边走,还是茫茫的一片树,于是他们在沿途走过的地方都撒下面包屑,他们利用这些面包屑帮助他们走出了森林,因此,面包屑导航的意思就是说我们去过哪些地方,以及我们如何回到我们之前的位置. 有时候我们特别需要面包屑导航,比如我们在某论坛或者某网上商城闲逛的时候,很容易被茫茫的帖子和众多的商品搞的

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器. 各种浏览器对CSS滚动条的支持情况这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器.这些浏览器加起来占有超过半数的桌面浏览器市场份额.对于