<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小U商城-首页</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/font.css">
<style>
/* 优化css: 去掉重复和冗余, 页面上一致的都可以封装起来(提出一个公共的class类名, 大家一起使用)
好处: 以后万一统一都改变, 那么只需要改一处css就可以了
*/
html {
font-family: "Microsoft YaHei";
font-size: 14px;
}
/* 容器标签的布局样式(固定宽度, 居中显示) */
.layout {
width: 1190px;
margin: 0 auto;
}
.ov{
overflow: hidden;
}
.rel {
position: relative;
}
/* (封装)公共的样式 */
/* 右侧更多>标签样式 */
.more {
font-size: 14px;
float: right;
line-height: 25px;
color: #5a626f;
}
/* 自定义字体使用 */
.icon {
/* 定义使用的字体: (使用自定义的字体iconfont) */
/* 注意上面已经引入了font.css字体文件(里面有@font-face自定义的字体) */
font-family: "iconfont";
}
/* 顶部导航 */
.nav_wrap {
background-color: #f5f5f5;
font-size: 12px;
}
.address_icon {
color: orange;
font-size: 16px;
}
.shop_icon {
font-size: 16px;
}
.nav_content {
overflow: hidden;
}
.nav_left {
float: left;
padding: 10px 0;
}
.nav_left a,
.nav_right a {
margin: 0 7px;
}
.nav_right {
float: right;
padding: 10px 0;
}
.nav_left a:hover {
color: orange;
}
.nav_right a:hover {
color: orange;
}
/* 结论: 字体图标和文字的大小一致的时候(两边标签高度相等), 才会水平卡其
两边的高度不相等, 怎么让middle对齐?
用transform来微调标签
transform: translate(0, 4px);
*/
/* 侧边栏导航 */
.left_nav {
position: fixed;
bottom: 100px;
}
.left_nav li {
background-color: #f8f8f8;
padding: 7px;
border: 1px solid #e8e8e8;
}
/* 是li触发hover以后, 选中后代a标签, 来对a标签设置文字颜色 */
.left_nav li:hover a {
color: red;
}
/* logo容器部分 */
/* .logo_wrap div 选择下属所有div */
/* .logo_wrap>div 选择儿子辈div */
.logo_wrap {
overflow: hidden;
padding: 28px 0;
}
.logo_wrap>div {
float: left;
}
.input_title_wrap {
margin-left: 150px;
}
.input_wrap {
font-size: 0;
}
.search_input {
font-family: "iconfont";
width: 420px;
border: 2px solid #ff6500;
height: 36px;
text-indent: 16px;
outline: none;
vertical-align: middle;
}
/* 修改输入框内, 占位文本的文字颜色 */
/* 注意:浏览器兼容的问题(在有一些手机/ie浏览器, 此伪类不生效) */
/* 可以配合js来使用:先填充一个具体内容(不用placeholder, 变成聚焦的时候再清空内容) */
.search_input::placeholder {
color: #ccc;
}
.search_btn {
width: 118px;
height: 42px;
border: none;
background-color: #ff6500;
color: white;
font-size: 20px;
vertical-align: middle;
}
.hot_search_wrap {
margin-top: 10px;
}
.hot_search_wrap {
/* 目的让回车符号变成0, 但是内容需要独立设置font-size */
font-size: 0;
}
.hot_search_wrap span {
color: #333;
font-size: 12px;
}
/* :after的意思, 在选中的标签内的末尾, 加入content内容 */
/* .hot_search_wrap span:after{
content: "|"
} */
.hot_search_wrap span {
padding: 0 10px;
border-right: 1px solid black;
/* 改变鼠标在标签身上的样式 (pointer是小手) */
/* a标签默认的cursor的值就是这个 */
cursor: pointer;
}
/* 先拿到.hot_search_wrap下所有的孩子们, 再提取第一个, 如果是span则生效 */
.hot_search_wrap span:first-child {
padding-left: 0px;
}
.hot_search_wrap span:last-child {
border: none;
}
.hot_search_wrap span:hover {
color: red;
}
/* 轮播图部分 */
.category_top_wrap {
overflow: hidden;
}
.category_top,
.category_choose {
float: left;
}
.category_top {
font-family: "iconfont";
color: white;
padding: 15px 80px 15px 15px;
background-color: #ff6500;
font-size: 14px;
width: 200px;
box-sizing: border-box;
}
.category_choose {
margin-left: 20px;
padding: 15px 0;
font-size: 14px;
font-weight: 900;
}
.category_choose a {
margin: 0 10px;
}
.banner_wrap {
/* 背景不算内容, 所以必须有宽高, 才会显示背景图 */
background: #f33853 url("./images/banner.jpg") center center no-repeat;
}
/* 分类导航 */
.category_wrap {
background-color: #262221;
width: 200px;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.category_wrap li {
padding: 8px 0;
}
.category_wrap a {
font-size: 14px;
color: white;
}
.category_wrap i {
color: #6e6a69;
}
.banner_info {
float: left;
font-family: "iconfont";
width: 990px;
height: 450px;
/* 因为子标签的百分比, 要参照你进行换算(每个父级都得有height) */
}
/* 让2个小箭头, 不以右侧的宽高都为0的div做参照物, 而是直接对中间的整个容器做参照物 */
.banner_info span:first-child {
position: absolute;
left: 200px;
top: 50%;
/*找父级参照物再换算*/
transform: translate(0, -50%);
}
.banner_info span:last-of-type {
position: absolute;
right: 0;
top: 50%;
/* 旋转是以左上角为原点(插住大头针), 想以自己中心点旋转(改变变换的基点) */
/* 旋转以后, 平移会失去真正的位置 (还是找一个右箭头) */
transform: translate(0, -50%) rotate(180deg);
}
/* 轮播图上的a标签 */
.banner_info a {
float: left;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
}
.dian_wrap {
position: absolute;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0);
}
.dian_wrap a:hover {
background-color: orange;
}
/* 底下内容大区域 */
.ma
网页设计大作业-小米商城 （110个子文件） 
font.css 2KB reset.css 2KB
index.html 67KB
item3.jpg 405KB detail_pic05.jpg 355KB 04.jpg 340KB detail_pic03.jpg 318KB login_banner.jpg 250KB detail_pic02.jpg 227KB detail_pic04.jpg 188KB 02.jpg 188KB good01.jpg 185KB good01.jpg 185KB item4.jpg 142KB b_img3.jpg 125KB banner.jpg 117KB banner.jpg 117KB detail_pic01.jpg 116KB good05.jpg 104KB b_img1.jpg 98KB b_img1.jpg 98KB b_img2.jpg 78KB good08.jpg 74KB img1.jpg 72KB img1.jpg 72KB pic3.jpg 63KB good02.jpg 57KB b_img4.jpg 54KB list_img15.jpg 53KB list_img07.jpg 43KB good04.jpg 43KB good07.jpg 42KB img2.jpg 41KB img2.jpg 41KB item8.jpg 39KB list_img02.jpg 39KB list_img14.jpg 39KB list_img05.jpg 39KB list_img09.jpg 39KB list_img04.jpg 38KB banner01.jpg 38KB banner01.jpg 38KB list_img12.jpg 38KB img3.jpg 38KB img3.jpg 38KB list_img01.jpg 37KB list_img01.jpg 37KB list_img08.jpg 37KB list_img11.jpg 35KB good03.jpg 33KB list_img06.jpg 30KB pic2.jpg 28KB good15.jpg 26KB list_img13.jpg 24KB good10.jpg 22KB good11.jpg 22KB list_img03.jpg 20KB good09.jpg 20KB item2.jpg 19KB pic1.jpg 18KB list_img10.jpg 16KB good06.jpg 16KB good12.jpg 11KB item1.jpg 11KB item1.jpg 11KB cart_logo.jpg 10KB cart_logo.jpg 10KB logo.jpg 10KB item6.jpg 9KB good16.jpg 9KB item7.jpg 9KB list02.jpg 8KB list01.jpg 8KB list01.jpg 8KB item5.jpg 7KB 01.jpg 7KB 01.jpg 7KB list03.jpg 6KB banner04.jpg 6KB banner04.jpg 6KB pic4.jpg 6KB banner03.jpg 5KB banner03.jpg 5KB banner02.jpg 1KB banner02.jpg 1KB .keep 0B .keep 0B
03.png 201KB good13.png 165KB sprite.png 86KB find01.png 21KB find01.png 21KB good14.png 20KB find02.png 5KB find02.png 5KB code4.png 2KB code3.png 582B code1.png 571B code2.png 554B banner.webp 25KB共 110 条
- 1
- 2
编程ID
- 粉丝: 9w+
最新资源
- csdn-example.zip.002
- csdn-example.zip.003
- msys2-shell.cmd 配置VC编译器环境
- csdn-example.zip.004
- csdn-examplea
- hhhhhhhhhhhgeargagearg
- DMP210DUFB4-PMOS-中文数据手册.pdf
- QTModbusTCP读写寄存器类封装
- AM26C32 -平衡数据四重差分线路接收器-中文数据手册.pdf
- ST1CC40-850kHz固定开关频率-单片DC-DC转换器-中文数据手册.pdf
- csdn-exampleb
- AI对抗样本检测：模型推理流量中的梯度泄露特征提取.pdf
- 6G太赫兹通信安全：物理层信令伪装攻击的频谱特征识别.pdf
- 5G切片网络流量监控：基于UPF接口的恶意切片识别实战.pdf
- AI模型投毒检测：TensorFlowLite流量中的异常权重传输特征.pdf
- AI预测模型实战：基于LSTM的DDoS攻击早期预警.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
前往页