您的位置: 首页  >  文章  >  Web前端模板（轮播图排版）

Web前端模板（轮播图排版）

分类: 文章 • 2024-02-20 20:39:53

Web前端模板（轮播图排版）代码已经上传到码云https://gitee.com/cuteSeven/webPageExample.git
这是页面效果
这是html代码

在这里插入代码片
```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/cuteSeven.css" />
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/myfocus-2.0.1.min.js"></script>
    <title>enterprisePage</title>
</head>
<script type="text/javascript">
myFocus.set({
    id:'focus-box',
    pattern:'mF_fancy',
    time:2,
    trigger:'click',
    width:1200,
    height:310,
    txtheight:'default'//文字层的高度设置 default为默认高度 
});
</script>
<body>
<div id="main-wrapper">
    <!--top-->
    <div id="top" >
       <i id="logo"></i>
    <div>
        <i id="phone"></i>
        <span>My email</span>
        <span>[email protected]</span>
    </div>
 </div>
 <!--导航栏-->

 <div id="nav">
     <nav>
         <a href="#">first page</a>
         <a href="#">second page</a>
         <a href="#">third page</a>
         <a href="#">four page</a>
         <a href="#">five page</a>
     </nav>
     <form id="search">
         <input type="text" name="" id="search-input">
         <button id="search-icon"></button>
     </form>
 </div>

 <!--焦点图-->
 <div id="focus-box">
     <div class="loading"><img src="images/loading.gif" alt="please wait"></div>
     <div class="pic">
         <ul>
             <li><a href="#"><img src="images/ad.jpg"></a></li>
             <li><a href="#"><img src="images/ad2.jpg"></a></li>
             <li><a href="#"><img src="images/ad3.jpg"></a></li>
             <li><a href="#"><img src="images/ad4.jpg"></a></li>
         </ul>
     </div>
 </div>

 <!--content-->

 <div id="main-content">
     <div id="news-center">
         <div class="th">
             <span>part1</span>
             <span>More&gt;&gt;</span>
         </div>

         <div class="news-ad">
                 <img src="images/news.jpg" alt="">
                 <p>
                     <span>angular</span><br>
                     <span>vue</span><br>
                     <span>node</span><br>
                     <span>learn more&gt;&gt;</span>
                 </p>
                 <br>
         </div>
         <div class="news-list">
             <ul>
                 <li><span>AngularJS 把应用程序数据绑定到HTML元素。</span></li>
                 <li><span>Vue是通过简单的 API 实现响应的数据绑定和组合的视图组件。</span></li>
                 <li><span>Node.js 是运行在服务端的 JavaScript，</span></li>
             </ul>
         </div>
     </div>

     <div id="course-center">
         <div class="th">
             <span>study</span>
             <span>More&gt;&gt;</span>
         </div>
         <div class="course-ad">
         <img src="images/css.jpg" alt="">
         <p>
             <span>css圆角进化论</span><br>

             CSS圆角的实现，经历了三大发展阶段：背
					景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性）。本案例详细讲解每一种的实现方式，并对实现的优缺点进行对比分析。
         </p>
        </div>
        <div class="course-language">
            <ul>
                <li>php</li>
                <li>node</li>
                <li>c#</li>
                <li>java</li>
            </ul>
        </div>
     </div>

     <div id="media-center">
         <div class="th">
             <span>iqiyi</span>
             <span>More&gt;&gt;</span>
         </div>
         <div class="center_div">
         <div class="video">
                <embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf" allowfullscreen="true" quality="high" width="220" height="140" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
         </div>
         <div class="media-ad"><img src="images/angular.png" alt=""></div>
        </div>
        
     </div>
 </div>
</div>    
 
<footer>
    <div>
        <ul>
            <li>javascript</li>
            <li>html</li>
            <li>css</li>
            <li>vue</li>
        </ul>
        <ul>
            <li>php</li>
            <li>c</li>
            <li>c++</li>
            <li>c#</li>
        </ul>
        <ul>
            <li>python</li>
            <li>sql</li>
            <li>mysql</li>
            <li>go</li>
        </ul>
        <ul>
            <li><img src="images/weixin.png" alt="">mywechat</li>
            <li><img width="120" src="images/author.jpg" alt=""></li>
        </ul>
    </div>
</footer>



</body>
</html>

这是css代码

*{margin: 0;
padding: 0}

body{
    background: rgb(245,245,245);
}

#main-wrapper{
    width: 1200px;
    margin: 0 auto;
}
#main-wrapper #top{
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: #fff;
}
#top #logo{
    width: 200px;
    height: 80px;
    background-image: url(../images/logo.jpg);
    float: left;
}
#top>div{
    float: right;
    margin-right: 25px;
    color :rgb(156,156,187);
    font-size: 12px;
}
#top>div #phone{
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url(../images/tel.jpg);
}
#top>div>span:last-child{
    color: rgb(204,0,87);
    font-size: 23px;
}
#main-wrapper #nav{
    width: 100%;
    background: rgb(120, 111, 102);
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center
}
#nav nav{
    float: left;
}
nav>a{
    color: #fff;
    padding: 5px;
    margin-left: 35px;
    text-decoration: none;
}
nav>a:hover{
    font-size: 25px;
}

#nav #search{
    background: #fff;
    float: left;
    margin-left: 135px;
    height: 25px;
    line-height: 25px;
    padding: 2px 2px 2px 5px;
    border-radius: 2px;
}
#search #search-input{
    margin-top:0;
    width: 200px;
    outline: none;
    height: 25px;
    border: none;
    float: left; 
}
#search>#search-icon{
    float: left;
    outline: none;
    border: none;
    width: 25px;
    height: 21px;
    background-image: url(../images/search.jpg);
}
#focus-box{
    width: 1200px;
    height: 310px;
    margin-top: 15px;
    clear: both;
}
#main-wrapper #main-content{
    width: 1200px;
    background: #fff;
    margin-top: 15px;
    height: 250px;
}

#main-content>div{
    border:1px solid #c2c2c2;
}
#main-content #news-center{
    width: 380px;
    float: left;
    height: 250px;
}
#main-content #course-center{
    width: 400px;
    float: left;
    margin-left: 10px;
    height: 250px;
}
#main-content #media-center{

	width: 360px;
	float: right;
	margin-right:0;
	height: 250px;
}
#main-content .th{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    font-weight: 700;
    border-bottom: 2px solid #c2c2c2;
}
.th>span{
    padding: 0 20px;
}
.th>span:last-child{
    float: right;
}
.news-ad,.course-ad,.news-list,.video,.media-ad{
	padding: 5px;
}
.news-ad>p,.course-ad>p{
    display: inline-block;
    font-size: 12px;
}
.news-ad>p>span,.course-ad>p>span{
    display: inline-block  ;
    padding-left: 2px;
    height: 24px;
    line-height: 24px;
    font-weight: 700;
}
.news-ad>p>span:first-child,.news-ad>p>span:last-child,.course-ad>p>span:first-child{
	color: red;
}
.news-ad>p>span:last-child{
    font-weight: lighter;
}
.course-ad>p{
    width: 225px;
    font-weight: lighter;
}
.news-list>ul{
    list-style: none;
    font-size: 12px;
    color: rgb(108, 108, 108)
}
.news-list>ul>li{
	clear: right;
	border-bottom: 1px solid rgb(108,108,108);
	background-image: url(../images/list.jpg) no-repeat left center; 
}
.news-list>ul>li>span{
	display: inline-block;
	height: 25px;
	line-height: 25px;
}
.course-language{
    margin-top: 40px;
    clear: both
}
.course-language>ul{
	width: 380px;
	list-style: none;
	height: 25px;
	background-image: url(../images/product_type_bg.jpg);
}
.course-language>ul li{
	display: inline-block;
	float: left;
	height: 25px;
	line-height: 25px;
	padding: 5px;
	margin-left: 10px;
}



footer{
	width: 100%;
	background: rgb(232,232,232);
	margin:0;
	padding-top:20px;
}


footer>div{
	width: 1000px;
	margin:auto;
	column-count: 4;
	column-rule:2px solid rgb(153,153,153);

}
footer>div>ul{
	list-style: none;
}
footer>div>ul>li{
	width:250px; 
	height: 25px;
	line-height: 25px;
	padding: 5px;
	text-align: center;
	color:rgb(153,153,153);
}
footer>div>ul>li:first-child{
	font-weight: 500;
	color:#000;
}
.center_div{
    margin: 0 auto;
    text-align: center
}

相关推荐