第一个网页（仿照当当网,仅仅使用CSS）详解编程语言
2023-06-13 09:20:37 时间
这个网页是在学过CSS之后，对当当网首页进行模仿的网页，没有看当当网的网页源码，纯按照自己之前学的写的，由于是刚学过HTML和CSS才一个星期，所以里面有许多地方写的非常没有水平，仅仅用来学习使用，欢迎各位大佬对我的这个简单网页不足的地方进行指正，谢谢各位大佬。
代码展示
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title Title /title
style
body{
background-color: rgba(234,234,234,1);
margin: 0;
/*border: 0;*/
z-index: 1;
.head {
/*margin: 0;*/
background-color: black;
margin:0;
padding:0;
z-index: 2;
.head .menu{
width: 1100px;
margin: 0 auto;
line-height: 38px;
/*height: 38px;*/
.head .menu li{
color: rgba(159,159,159,1);
float: left;
margin-top: 8px;
list-style-type:none;
.menu a{
color: rgba(159,159,159,1);
text-decoration: none;
font-size: 5px;
.menu a:hover{
color: white;
.menu .found{
display: inline;
margin:0;
.menu .found a{
float: right;
margin-right: 3px;
margin-left: 3px;
.menu .found a:hover{
background-color: rgba(145,145,145,1);
.eyes{
margin:0 auto;
width: 1100px;
height: 100px;
line-height: 100px;
background-color: rgba(234,234,234,1);
border:0;
padding:0;
position: relative;
z-index: 999;
.eyes .eyes_z img{
height: 55px;
margin-top: 15px;
position: absolute;
.eyes span {
margin-top: 15px;
width: 2px;
.eyes input{
margin-top: -15px;
margin-left: 180px;
height: 40px;
width:500px;
padding-left:80px;
/*border-break: close;*/
.eyes .eyes_o{
position: absolute;
left: 190px;
.eyes .eyes_t{
margin-top: 30px;
margin-left: 6px;
width: 45px;
height: 45px;
background-color: rgba(226,0,82,1);
display: inline-block;
z-index: 1;
position: absolute;
border:maroon;
.eyes .eyes_t img{
top: 12px;
left: 4px;
position: absolute;
.eyes_f{
display: inline-block;
float: right;
font-size: 15px;
.eyes_f a{
margin: 3px;
text-decoration: none;
color: lightslategray;
.eyes_f a:hover{
color: white;
.body{
width:1100px;
margin:0 auto;
.head_top{
.body_bfbd{
background-image: url("http://v.dangdang.com/Standard/Vipshop/Extend/hosts/images/shop_box_title_bg.png");
width: 960px;
height: 50px;
margin: 0 auto;
.body_bfbd h1{
margin-left: 20px;
color: white;;
.body_commodity{
border: outset 3px rgba(62,7,62,0.69);
margin-top: 20px;
width: 250px;
height: 250px;
position: relative;
display: inline-block;
margin-right: 15.4px;
.body_commodity img {
width: 250px;
height: 250px;
.body_commodity .pj{
position: absolute;
top: 150px;
left:0;
right: 0px;
bottom:0;
background:rgba(0,0,0,.6);
color: white;
text-align:center; /*文字居中*/
visibility: hidden
.body_commodity:hover .pj{
visibility: visible;
.pj_one{
font-size: 22px;
padding :30px 0;
.footer_zero{
height: 50px;
line-height: 50px;
.footer_one{
width: 720px;
height: 80px;
line-height: 80px;
position: relative;
border-left-width: 0;
/*.footer_one img{*/
/*position: absolute;*/
/*}*/
/*.footer .footer_one a{*/
/*display: block;*/
/*height: 52px;*/
/*width: 187px;*/
/*float: left;*/
/*padding: 7px 0 7px 48px;*/
/*!*display: none;*!*/
/*footer .footer_one a span{*/
/*text-indent: -9999px;*/
/*display:block;*/
/*width: 138px;*/
/*height: 52px;*/
/*background: url("http://img61.ddimg.cn/upload_img/00660/home/footer_bg.png") 0 0 no-repeat;*/
/*font-size:0;*/
/*line-height: 0;*/
/*cursor: pointer;*/
/*}*/
.footer_three .footer_five{
float: left;
/*margin-left: 40px;*/
margin-left: 10px;
.footer_five{
margin-left: 20px;
display: inline-block;
width: 130px;
.footer_three{
background-color: white;
/*width: 1000px;*/
margin:0 auto;
height: 200px;
/*line-height: 200px;*/
z-index: 3
.footer_four{
background-color: white;
height: 200px;
width: 1000px;
margin:0 auto;
/*left: -500px;*/
ul{
list-style-type: none;
.footer_five ul a{
color: rgba(0,0,0,0.69);
text-decoration: none;
font-size: 5px;
.footer_five a:hover{
color: black;
.fly {
margin-top: 203px;
width: 150px;
height: 100px;
float: right;
margin-right: 200px;
position: fixed;
.fly img{
width: 150px;
height: 150px;
/style
/head
body
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506449298549 di=8f72c24e3e54a28c705a8cf3178661df imgtype=0 src=http%3A%2F%2Feasyread.ph.126.net%2FHQKV9YFqAoL3SAatH6WQCg%3D%3D%2F7916715716943982967.gif"
/div
div
div
div
span 欢迎光临当当，请 /span
a href="https://login.dangdang.com/signin.aspx?returnurl=http%3A//v.dangdang.com/" 登录 /a
a href="https://login.dangdang.com/Register.aspx?returnurl=http%3A//v.dangdang.com/" 成为会员 /a
div
a href="http://giftcard.dangdang.com/giftcardCompany" 企业采购 /a
a href="http://help.dangdang.com/index" 客户服务 /a
a href="http://e.dangdang.com/touch/special/goldenIP/essays.html" 小说投稿 /a
a href="https://login.dangdang.com/Signin.aspx?ReturnUrl=http://myhome.dangdang.com/" 我的当当 /a
a href="https://login.dangdang.com/signin.aspx?returnurl=http%3A%2F%2Fe.dangdang.com%2Fbooksshelf_page.html" 我的云书房 /a
a href="https://login.dangdang.com/Signin.aspx?ReturnUrl=http://myhome.dangdang.com/myOrder" 我的订单 /a
a href="http://shopping.dangdang.com/shoppingcart/shopping_cart.aspx?product_ids=0 referer=http://v.dangdang.com/pn10748_355_1.html prev_referer=" 购物车 /a
/div
/div
/div
div
a img src="http://img60.ddimg.cn/upload_img/00694/weipinhui_header/v_logo.png" /a
span /span
input
a 全部分类 /a
div a img src="001.PNG" /a /div
div
span
大家都在搜:
/span
a href="http://search.dangdang.com/?key=%B3%E4%C6%F8%CD%E6%BE%DF act=input" 气球 /a
a href="http://search.dangdang.com/?key=%B0%B4%C4%A6%B0%F4 act=input" 按摩椅 /a
a href="http://search.dangdang.com/?key=%B5%E7%B6%AF%CD%E6%BE%DF act=input" 电动玩具 /a
/div
!-- div 1 /div --
/div
div
div
li a href="http://v.dangdang.com/pn10748_355_1.html" 当当首页 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 尾品会 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 孕婴童 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 男装 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 女装 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 内衣 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 鞋履 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 运动/户外 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 箱包/礼品 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 珠宝饰品 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 居家 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 美装 /a /li
li a href="http://v.dangdang.com/pn10748_355_1.html" 童书/图书 /a /li
li a href="http://baidu.com" 收藏此页 /a /li
/ul
/div
!-- div 1 /div --
div /div
div 1 /div
/div
div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506359964250 di=1c714f95a4e30404ad31c7bd5a4e4e3c imgtype=0 src=http%3A%2F%2Fimg02.tooopen.com%2Fimages
%2F20150606%2Ftooopen_sy_128761962238.jpg"
/div
div
div 天堂 /div
div 100万-200万 /div
/div
/div
div
a 分类: /a
div
a href="http://v.dangdang.com/pn10748_355_1.html" 全部 /a
/div
span
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 运动/户外鞋（32） /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 休闲鞋（17） /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 靴子/雪地靴 /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 皮鞋 /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 帆布鞋/板鞋 /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 亲子鞋 /a
a href="http://v.dangdang.com/pn10748_355_1-cid4009377.html" 学步鞋 /a
/span
/div
div
div /div
a href="http://v.dangdang.com/pn10748_355_1.html" 只显示有货的产品 /a
div
div a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html" 折扣▼ /a /div
div a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html" 价格▲ /a /div
div a href="http://v.dangdang.com/pn10748_355_1-f1-srdiscount_desc.html" 默认排序 /a /div
/div
/div
div
h1 特惠专区 /h1
/div
div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506419519658 di=3472d0446b397ad5b0dceac678cb8fb5 imgtype=0 src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2016_03%2F17%2Fhome
%2F1458198286459_000.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
div
div
img src="https://timgsa.baidu.com/timg?image quality=80 size=b9999_10000 sec=1506438937051 di=ee4c1e5927da0737c0dca5910e4b2342 imgtype=0 src=http%3A%2F%2Fimg01.taopic.com%2F160712%2F318741-160G21KJ678.jpg"
/div
div
div MAX /div
/div
/div
/div
/div
div
div /div
div /div
div /div
div
div
span styel=
/span
/div
/div
div
div
div
li a 购物指南 /a /li
li a href="http://help.dangdang.com/details/page2" 购物流程 /a /li
li a href="http://help.dangdang.com/details/page2" 发票制度 /a /li
li a href="http://help.dangdang.com/details/page2" 账户管理 /a /li
li a href="http://help.dangdang.com/details/page2" 会员优惠 /a /li
/ul
/div
div
li a 支付方式 /a /li
li a href="http://help.dangdang.com/details/page2" 货到付款 /a /li
li a href="http://help.dangdang.com/details/page2" 网上支付 /a /li
li a href="http://help.dangdang.com/details/page2" 礼卡支付 /a /li
li a href="http://help.dangdang.com/details/page2" 银行转帐 /a /li
/ul
/div
div
li a 订单服务 /a /li
li a href="http://help.dangdang.com/details/page2" 订单配送查询 /a /li
li a href="http://help.dangdang.com/details/page2" 订单状态说明 /a /li
li a href="http://help.dangdang.com/details/page2" 自助取消订单 /a /li
li a href="http://help.dangdang.com/details/page2" 自助修改订单 /a /li
/ul
/div
div
li a 配送方式 /a /li
li a href="http://help.dangdang.com/details/page2" 配送范围及免邮 /a /li
li a href="http://help.dangdang.com/details/page2" 当日递/次日达 /a /li
li a href="http://help.dangdang.com/details/page2" 订单自提 /a /li
li a href="http://help.dangdang.com/details/page2" 验货与签收 /a /li
/ul
/div
div
li a 退换货 /a /li
li a href="http://help.dangdang.com/details/page2" 退换货政策 /a /li
li a href="http://help.dangdang.com/details/page2" 自助申请退换货 /a /li
li a href="http://help.dangdang.com/details/page2" 退换货进度查询 /a /li
li a href="http://help.dangdang.com/details/page2" 退款方式和时间 /a /li
/ul
/div
div
li a 商家服务 /a /li
li a href="http://help.dangdang.com/details/page2" 商家中心 /a /li
li a href="http://help.dangdang.com/details/page2" 运营服务 /a /li
li a href="http://help.dangdang.com/details/page2" 加入尾品汇 /a /li
/ul
/div
/div
div /div
/div
/div
/div
/body
/html
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/12380.html
cgojava相关文章
- 微信公众号网页开发之拍照、上传本地图片
- 第二章 网页基本代码
- HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]
- CSS将整站网页变成黑白色调，致敬英雄！（2020年4月4日全国哀悼日）
- CSS filter-网页变灰
- HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言
- 设计更快的网页（三）：字体和 CSS 调整
- 命令行下Linux网页开发体验新突破（命令行 网页 linux）
- 实现及时网页消息推送利用Redis实现（网页消息推送redis）
- 用xslt+css让RSS显示的跟网页一样漂亮
- 教你如何用CSS来控制网页字体的显示样式
- 实时编辑网页网页文字实时编辑，如同TEXTBOX一般
- CSS网页布局入门教程9：用CSS设计网站导航——横向导航
- CSS网页布局入门教程10：带当前标识的标签式横向导航
- CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
- ASP获取网页全部图片地址并保存为数组的正则
- CSS规则层叠的应用css必须要注意的几点
- PHP网页过期时间的控制代码
- 简单的加密css地址防止别人下载你的CSS文件的方法
- php压缩多个CSS为一个css的代码并缓存
- 网页编辑器ckeditor和ckfinder配置步骤分享
- PHP中将网页导出为Word文档的代码
- jQuery切换网页皮肤并保存到Cookie示例代码
- C#获取网页HTML源码实例