index 首页

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/index.css"/>

    </head>

    <body>

        <div class="content">

            <div class="banner">

                <img src="img/banner/1.jpg"  id="myimg">

            </div>

            <div class="star">

                 <div class="tilte"></div>

                 <ul>

                     <li><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></li>

                     <li><img src="img/necessary-2.gif" alt=""><span>官方应援手福专区</span></li>

                     <li><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></li>

                     <li><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></li>

                     <li><img src="img/special.jpg" alt=""></li>

                 </ul>

            </div>

            <div class="top">

                <div class="title"></div>

                <ul>

                    <li><a href="list.html"><img src="img/top/a/toplist_a01.jpg" alt=""></a><span>薛之谦</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a02.jpg" alt=""></a><span>IKON</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a03.jpg" alt=""></a><span>鹿晗</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a04.jpg" alt=""></a><span>GOT7</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a05.jpg" alt=""></a><span>EXO</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a06.jpg" alt=""></a><span>Astro(韩国)</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a07.jpg" alt=""></a><span>Winner</span></li>

                    <li><a href="list.html"><img src="img/top/a/toplist_a08.jpg" alt=""></a><span>BigBang</span></li>

                </ul>

            </div>

            <div class="list">

                <div class="title">

                </div>

                <!-- ul>(li>img[src=img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num)*9 -->

                <ul>

                    <li>

                        <img src="img/pro/1.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/2.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/3.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/4.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/5.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/6.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/7.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/8.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/9.jpg" alt="">

                        <div class="right">

                            <span class="title">[现货包邮]加一联创 Imore bear 万魔熊 头</span>

                            <span class="money">￥50</span>

                            <div><span class="love"></span><span class="num">0</span></div>

                        </div>

                    </li>

                </ul>

            </div>

        </div>

        <div class="type2" >

                  <img src="img/footer_v180123.png" >

        </div>

             <script type="text/javascript">

                         window.onload=function(){

                             var myImg=document.getElementById("myimg");

                             var arr=["img/banner/1.jpg","img/banner/2.jpg","img/banner/3.jpg","img/banner/4.jpg"];

                             var n=0;

                             setInterval(function(){

                                 n++;

                                 if(n==arr.length){

                                     n=0;

                                 }

                                 myImg.src=arr[n];

                             },1000);

                         }

                     </script>

    </body>

</html>

body{

    background-color: #CCCCCC;

} 

.content ul{

    padding: 0px;

    margin: 0px;

}

.content ul li{

    display: inline-block;

}

.content{

    width: 1000px;

    margin: 0 auto;

}

.content .banner img{

    width: 1000px;

}

.content .star{

    margin-top: 20px;

}

.content .star .tilte{

    background-image:url(../img/zhuxing.png);

    background-repeat: no-repeat;

    height: 45px;

}

.content .star li {

    background-color: white;

    vertical-align: bottom;

    /*vertical-align: bottom（底部）水平对齐*/

}

.content .star li:last-child {

     height: 135px;

     margin-left: 20px;

}

.content .star li:last-child{

    background-color:#CCCCCC;

}

.content .star li:last-child img {

     height: 124px;

     width: 240px;

     margin-top: 10px;

}

.content .star li img{

    width: 180px;

}

.content .star li span{

    display: block;

    text-align: center;

    padding: 5px;

    height: 20px;

    line-height: 20px;

    color: #999999;

    font-size: 12px;

}

.content .top{

    margin-top:20px ;

}

.content .top .title{

    height: 40px;

    background-image: url(../img/shop_title2.png);

    background-repeat: no-repeat;

    background-position: 0 -60px;

}

.content .top li{

    margin: 0 3px;

    width: 115px;

    background-color: #FFFFFF;

}

.content .top li:first-child{

    margin-left: 0;

}

.content .top li:last-child{

    margin-right: 0;

}

.content .top img{

    width: 115px;

}

.content .top  span{

    display: block;

    text-align: center;

    line-height: 30px;

    height: 30px;

    width: 115px;

    font-size: 14px;

    padding: 5px;

}

/* .content .top span:nth-child(6){

    margin-left: 10px;

} */

.content .list li{

     background-color: #FFFFFF;

     width: 322px;

     margin: 10px 5px;

     height: 154px;

}

.content .list li:nth-child(3n+1){

    margin-left: 0;

}

.content .list li:nth-child(3n){

    margin-right: 0;

}

.content .list img{

    height: 154px;

    width: 154px;

}

.content .list .right span{

    display: block;

    color: #999;

    margin: 10px 5px;

    width: 150px;

    font-size: 14px;

    height: 40px;

    overflow: hidden;

}

.content .list .right{

    display:inline-block;

    vertical-align: top;

}

.content .list .right  .title{

     /* margin-top: 30px; */

     margin-top: 30px;

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

}

.content .list .right .money{

    color: #DE4767;

}

.content .list .right div span{

    display: inline-block;

}

.content .list .right div {

    margin-top: -7px;

}

.content .list .right .love{

    width: 12px;

    height: 12px;

    background-image: url(../img/icon/ico.png);

    background-repeat: no-repeat;

    background-position:0 -74px;

    margin-top: 0px;

}

.content .list .right .num{

    width: 100px;

    margin-top: -6px;

    vertical-align: top;

}

.type2{

    background-color: #FFFFFF;

    margin-top: 10px;

    height: 60px;

    /* line-height: 80px; */

    /* margin: auto; */

}

.type2 img{

    margin-top: 5px;

    margin-left: 250px;

    width: 1000px;

}

ul>(li>img[src=img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num)*9

<ul>

                    <li>

                        <img src="img/pro/1.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/2.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/3.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/4.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/5.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/6.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/7.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/8.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                    <li>

                        <img src="img/pro/9.jpg" alt="">

                        <div class="right">

                            <span class="title"></span>

                            <span class="money"></span>

                            <div><span class="love"></span><span class="num"></span></div>

                        </div>

                    </li>

                </ul>

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了

vertical-align: bottom; 字体显示在一行

1、vertical-align

.content .star li{

vertical-align: bottom;
height: 135px;
/* vertical-align: bottom;底部对齐 */
}

vertical-align: bottom; 底部对齐

vertical-align: top; 顶部对齐

vertical-align: bottom; 水平对齐

2.超过文本设定的宽度显示省略号

.content .list .right .title{
margin-top: 30px;
display: block;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //浏览器的兼容
line-clamp: 2;
-webkit-box-orient: vertical;
}

3.背景图片（精灵图）

background-image: url(../img/icon/ico.png); //背景图片
background-repeat: no-repeat; //背景图片不平铺
background-position: 0px -72px; //背景图片的位置

面试题：

11. 为什么要使用 css sprites

(1) css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

(2) css sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 css 的

"background-image","background-position"的组合进行背景定位，这样可以减少。

(3) 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务

器增加很大的压力。12. 描述一下渐进增强和优雅降级之间的不同

(1) 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功

能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

(2) 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行

兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从

一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能

衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

13. 请描述一下 cookies，sessionStorage 和 localStorage 的区别

(1) sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当

会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话

级别的存储。

(2) localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似，区别是它是为了更

大容量存储设计的。

(3) Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这

样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。除此之外，Web

Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自

己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务

器进行交互，作为 HTTP 规范的一部分而存在，而 Web Storage 仅仅是为了在本地“存

储”数据而生。

14. CSS 都有哪些选择器

(1) 派生选择器（用 HTML 标签申明）

(2) id 选择器（用 DOM 的 ID 申明）

(3) 类选择器（用一个样式类名申明）

(4) 属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）

(5) 除了前 3 种基本选择器，还有一些扩展选择器，包括

(6) 后代选择器（利用空格间隔，比如 div .a{ }）

(7) 群组选择器（利用逗号间隔，比如 p,div,#a{ }）15. CSS 选择器的优先级是怎么样定义的

基本原则：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级

就越高。

(1) 若是行内选择符，则加 1、0、0、0

(2) 若是 ID 选择符，则加 0、1、0、0

(3) 若是类选择符/属性选择符/伪类选择符，则分别加 0、0、1、0

(4) 若是元素选择符/伪元素选择符，则分别加 0、0、0、1

index 首页的更多相关文章

index首页加载数据库数据方法
https://blog.csdn.net/qq_33198758/article/details/82987805 在做网站的时候,会遇到需要首页加载数据库数据的情况.而web.xml配置的首页: ...
003---设计首页index页面
在项目的urls.py文件添加一条url from django.contrib import admin from django.urls import path, re_path from app ...
jeecms3.0.4版本详解请求如何找到首页(转)
第一步:发送http://localhost:8080/emisstrade/ 请求第二步:首先进入配置文件web.xml, <context-param> <param-name ...
Module ngx_http_index_module nginx的首页模块
Example Configuration:例子配置文件Directives 指令 index 首页 The ngx_http_index_module module processes r ...
例子: 自制Flask首页导航.
# -*- coding:utf-8 -*- ''' Created on 2015年10月19日 ''' from flask import Flask, render_template impor ...
帝国cms面包屑导航的首页链接锚文本改成关键字
帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...
TP5 首页导航一级和二级分类
<ul id="jsddm"> <li><a class="navi_home" href="{:url('/index ...
帝国CMS当前位置中的“首页”二字如何修改
1.帝国CMS当前位置首页那两个字在哪里可以修改吗? 2.[!--newsnav--]该处的首页链接,请问在哪儿修改? 3.导航条[!--newsnav--]默认首页为:“首页”可以更改么? 4.导航 ...
JEECMS站群管理系统-- 首页的加载过程
在浏览器中输入http://localhost:8080/jeecms,回车首先进入配置文件web.xml, <context-param> <param-name>cont ...

随机推荐

ggplot2 画图随笔
ggplot2 盒图+显著性线 compire <- list(c('1','2'),c('1','4')) ggplot(info,aes(x=cluster,y=value))+ stat_ ...
python3.7+flask+alipay 支付宝付款功能
文档参考github:https://github.com/fzlee/alipay/blob/master/docs/init.md 沙箱环境配置:https://opendocs.alipay.c ...
鸿蒙内核源码分析(忍者ninja篇) | 都忍者了能不快吗 | 百篇博客分析OpenHarmony源码 | v61.02
百篇博客系列篇.本篇为: v61.xx 鸿蒙内核源码分析(忍者ninja篇) | 都忍者了能不快吗 | 51.c.h.o 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿蒙 ...
P4022-[CTSC2012]熟悉的文章【广义SAM,dp,单调队列】
正题题目链接:https://www.luogu.com.cn/problem/P4022 题目大意给出$m$个模板串. 然后$n$次询问给出一个串$S$要求找到一个最大的$L$使 ...
WPF进阶技巧和实战03-控件（5-列表、树、网格02）
数据模板样式提供了基本的格式化能力,但是不管如何修改ListBoxItem,他都不能够展示功能更强大的元素组合,因为了每个ListBoxItem只支持单个绑定字段(通过DisplayMemberPa ...
sqlite3 c++使用以及提高速率（一万条每秒左右）
参考来源: sqlite3的C语言使用(三):https://www.leavesongs.com/C/sqlite3_3.html sqlite插入和查询效率提高方法及测试结果: http://bl ...
Java基础之（六）：变量、运算符与JavaDoc
变量.常量一.变量的命名规范首字母只能以字母(A-Z或者a-z)或者美元符($)或者下划线(_)开头,不能以数字开头,首字母之后只能跟字母(AZ或者az)或者数字,不能跟美元符或者下划线源码 p ...
CF125E MST company （凸优化+MST）
qwq自闭的一个题我来修锅辣!!!!!! 这篇题解!可以$hack$全网大部分的做法!!! 首先,我们可以把原图中的边,分成两类,一类是与$1$相连,另一类是不与$1$相连. 原题就转化 ...
常用SQL函数大全
数学函数 mod(x,y) 返回x/y的模(余数)mod(5,3)=2,mod(3,5)=3 floor(x) 返回小于x的最大整数值ceiling(3)=3,ceiling(3.1)=3 cei ...
SoapUI入门实例
一.Soapui介绍 WSDL(Web Services Description Language)就是这样一个基于XML的语言,用于描述Web Service及其函数.参数和返回值.它是WebSer ...

index 首页

index 首页的更多相关文章

随机推荐

热门专题