【博学谷学习记录】超强总结，用心分享丨一款钻戒网站的html、css

效果如图：

代码如下：

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li><a href="#">English</a></li>

</ul>

</div>

</div>

<ul>

<li><a href="#">Darry Ring求婚钻戒</a></li>

<li><a href="#">Darry Ring 爱的礼物</a></li>

</ul>

</div>

</a>

</div>

国家/区域:   <select>

</select>

<span>身份证号码</span>   <input type="text">

</div>

</ul>

</div>

</body>

</html>

* {

margin: 0;

padding: 0;

}

.w {

width: 1620px;

margin:0 auto;

}

body {

background-color: #ffffff;

}

li {

list-style: none;

}

a {

text-decoration: none;

}

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;}

.nav li{

float: right;

}

.nav a{

padding-right: 16px;

padding-left: 16px;

}

.nav li a{

font-family: 宋体;

color:#999999;

font-size: 15px;

}

.header{

height: 100px;

}

.header img{

margin-top: 32px;

width: 437px;

height: 60px;

background-color: #fff;

}

.nav2{

float: left;

margin-top: 10px;

width: 1908px;

height: 40px;

background-color: #ffdede;

}

.nav2 ul{

margin-left: 71px;

}

.nav2 li{

float: left;

margin-left: 90px;

}

.nav2 li a{

font-family: 微软雅黑;

font-size: 16px;

line-height: 40px;

color: #95604b;

}

.dahezi{

width: 1908px;

height: 2025px;

background-color:#ffdede;

}

.input{

height: 60px;

background-color: #fdf8f5;

font-size: 20px;

color:#95604b;

line-height: 55px;

padding-left: 100px;

}

.input select{

vertical-align: middle;

width: 120px;

height: 35px;

font-size: 18px;

}

.input span{

padding-left: 160px;

vertical-align: middle;

}

.input input{

vertical-align: middle;

width: 258px;

height: 35px;

background-color: #fff;

vertical-align: middle;

}

.tupian li{

float: left;

width: 380px;

height: 256px;

background-color: green;

margin-left: 33px;

}

.tupian li:first-child{

margin-left:0;

}

.tupian a{

float: left;

}

.tupian li img{

width: 380px;

height: 192px;

}

【博学谷学习记录】超强总结，用心分享丨一款钻戒网站的html、css相关推荐

[博学谷学习记录]超强总结,用心分享|第07节常用的API-----笔记篇
目录 1.API 1.1 API概述-帮助文档的使用 1.2 键盘录入字符串 2. String类 2.1 String概述 2.2 String类的构造方法 2.4 创建字符串对象的区别对比 2.5 ...
{博学谷学习记录} 超强总结,用心分享|狂野架构师-前置互联网架构演变过程
本章以系统架构,数据架构,两种维度来进行讲解目录 1 系统架构 1,1 单体架构 1.2 中台战略 2 数据库架构 2,1 单体架构 2.2 主从读写 2.3 分库分表 3 总结 1 系统架构 1, ...
[博学谷学习记录]超强总结,用心分享|架构 Nacos入门
提示:学习笔记欢迎指点文章目录前言一.Nacos安装二.Nacos服务注册与发现 1.服务提供者Provider 2.服务消费者Consumer 三.Nacos作为配置中心前言 Nacos ...
[博学谷学习记录]超强总结,用心分享|架构敏捷 - 开发管理之道
提示:学习笔记欢迎指点文章目录 1.敏捷开发思想之道 2.面向对象开发之道 3.敏捷学习之道 1.敏捷开发思想之道一名敏捷开发者,敏捷思想的掌握自然首当其冲.在敏捷开发实施的过程中,我们虽然不是 ...
[博学谷学习记录]超强总结,用心分享|第16节集合续-----笔记篇
目录 1.HashSet集合 1.1HashSet集合概述和特点[应用] 1.2HashSet集合的基本应用[应用] 1.3哈希值[理解] 1.4哈希表结构[理解] 1.5HashSet集合存储学生对 ...
[博学谷学习记录] 超强总结，用心分享|陌陌综合案例
注:大家觉得博客好的话,别忘了点赞收藏呀,本人每周都会更新关于人工智能和大数据相关的内容,内容多为原创,Python Java Scala SQL 代码,CV NLP 推荐系统等,Spark Flin ...
[博学谷学习记录]超强总结，用心分享|Hive的压缩格式
压缩格式工具算法文件扩展名是否可切分 DEFAULT 无 DEFAULT .deflate 否 Gzip gzip DEFAULT .gz 否 bzip2 bzip2 bzip2 .bz2 是 ...
[博学谷学习记录]超强总结，用心分享|软件测试之计算机基础（一）
本周开始学习软件测试,而我也即将开始在平台记录我的学习之路.我会把我的个人心得及掌握的知识发布在此平台,俗话说最好的输入就是输出,希望在输出的同时能有更多的收获,也希望与大家多多交流. 为了更好的学习 ...
[博学谷学习记录]超强总结，用心分享|人工智能机械学习基础知识线性回归总结分享
1.线性回归的核心是参数学习,线性回归和回归方程(函数)有关 2.线性回归是目标值预期是输入变量的线性组合 3.欠拟合的产生原因是学习到数据的特征过少 4.多元线性回归中的"线性" ...

【博学谷学习记录】超强总结，用心分享丨一款钻戒网站的html、css

【博学谷学习记录】超强总结，用心分享丨一款钻戒网站的html、css相关推荐

最新文章

热门文章