Web前端模板（輪播圖排版）

阿新 • • 發佈：2018-12-20

在這裡插入圖片描述程式碼已經上傳到碼雲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
}

Web前端模板（輪播圖排版）

程式碼已經上傳到碼雲https://gitee.com/cuteSeven/webPageExample.git 這是頁面效果這是html程式碼在這裡插入程式碼片 ```<!DOCTYPE html> <html lang="en">

WEB前端開發：輪播圖的實現（H5+C3+JavaScript）(JQuery)

一、輪播圖的概念輪播圖就是一種網站在介紹自己的主打產品或重要資訊的傳播方式。說的簡單點就是將承載著重要資訊的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的瞭解到網站想要表達的主要資訊。例如：淘寶，京東，等大型的購物平臺。以及各種新聞網站的頭版頭條都是用這

簡單的跑馬燈效果（輪播圖）

font script meta 圖片 ive abs height 單單 none 邏輯簡介：想要圖片或者是文字向左移動，那肯定得用到定時器，那麽移動那就必然是距離左邊的left值在改變；核心問題就是通過定時器來改變ul距離left的值；本姑娘就是簡簡單單直直接接，上代碼

CSS3——animation的基礎（輪播圖）

ase rect 次數 bsp dir 前端 bic 圖片 out 作為前端剛入門的小菜鳥，只想記錄一下每天的小收獲對於animation動畫 1.實現動畫效果的組成：（1）通過類似Flash的關鍵幀來聲明一個動畫（2）在animation屬性中調用關鍵幀聲明的動畫

PullList+多條目（困難版（輪播圖+資料展示））

1.Fragment頁面 public class PullFragment extends Fragment { private PullToRefreshListView pull; private PullBase pullBase; private int page; priv

6_bootstrap之導航條|輪播圖|排版|表單元素|分頁

8、導航條 BootStrap已經提供了完整的導航條例項，通常情況下，我們僅需進行簡單修改即可使用。幫助手冊位置：元件-------導航條 9、輪播圖 BootStrap已經提供了完整的輪播圖例項，通常情況下，我們僅需進行簡單修改即可使用。幫助手冊位置：JavaScript外掛-

輪播圖+ListView多條目展示（輪播圖暫無）

MainActivity_UI package com.example.demo.ui.activity; import android.support.v7.app.AppCompatActivity; import android.os.Bundle;

Android的banner（輪播圖）的實現

本文使用了ViewPager來實現輪播圖的功能，輪播的圖片資源來源於網上。一、思路 1、就是使得ViewPager實現啟動頁來無限的輪播圖片 2、啟動一個定時器來完成自動的輪播效果。二、寫佈局程式碼 1、我們先是來看一下

H5頁面中的視訊輪播（類似於banner輪播圖效果）

先說下我的需求，如下圖：手機模型中間部分是視訊播放，當一條視訊播放完畢後，整屏會自動上滑切換到下一個視訊。提起輪播，我們看到的最多的就是banner輪播圖，而提起輪播圖，我會馬上想起用Swiper。一開始為了快速開發，就想著用swiper來實

web前端-boostrap圖片輪播

<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w

自定義寬高比例的view（輪播圖，item等）

為解決輪播圖、listview中的item，放在不通解析度的手機上會出現拉伸變形。比較簡單不多說下邊直接貼程式碼關於下邊方法中 - getPaddingLeft() - getPaddingRight()後又加上是因為如果view中設定了padding 則會改

web前端技術課程講解之關於輪播圖水平無縫滾動

製作這個簡單的輪播圖之前，你必須掌握html、css、以及JavaScript中的節點操作，定時器的使用，條件語句的使用以及JS修改樣式和動畫原理。輪播圖對於網頁來說是個常見也可以說是必備的部分，而輪播圖的形式也是各式各樣，有簡約的也有炫酷的。當然，這裡我就只說簡約的全屏輪播圖水平無縫滾動。首先是給出

前端學習（1）-輪播圖

1.背景寫過一段時間的後臺程式碼，總感覺自己做的介面有些難看。想嘗試著寫一些好看的介面。於是我從基本的css+html+javacript複習起來。嘗試著做一個輪播圖。 2.第一部分用HTML寫一個主體的框架。首先用ul列表來存放圖片和描述。接著寫一個di

web前端端技術詳細解析左右滑動輪播圖

首先，在解析輪播圖的實現原理之前，我們得知道什麼是輪播圖。顧名思義，輪播圖就是在網頁中能夠迴圈播放並且可以手動切換的圖片。輪播圖一般作為banner出現在網頁頭部靠下的位置，用以向用戶展示一些比較重要或熱門的東西。輪播圖的播放效果有很多種，今天我們只取其中一種進行原理解析，因為雖然效果略有不同，但

前端框架Vue（14）—— 利用 vue 過渡效果（transition）+定時器實現輪播圖通用元件

序論：輪播圖相信都不會陌生，很多的網站都會有，而且實現的方式也是千變萬化，可以利用封裝好的 UI 庫（bootstrap），也可以原生的 JS 進行編寫。但是其中，動畫（transition）和定時器都是必不可少的。本文就是利用 vue

輪播圖（一）

left margin font ges opacity onload rgb absolut pin <style>　　*{ margin:0; padding:0; list-style:none; }　　.box{ width:520px; height:

vue移動音樂app開發學習（三）：輪播圖組件的開發

hub out webapp width eth reat slot utc -1 本系列文章是為了記錄學習中的知識點，便於後期自己觀看。如果有需要的同學請登錄慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。完成後的頁面狀態以及項目結構如

【前端】javascript實現帶有子菜單和控件的輪播圖slider

style creat radius .get abs weight col 技術分享 city 實現效果：實現原理： // 步驟 // 1. 獲取事件源以及相關元素 // 2. 復制第一張圖片所在的li，添加到ul的最後面 // 3. 給ol添加li，ul中的個數-

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果：實現原理：技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

原生js解決圖片點擊左右切換（簡單輪播圖）

邏輯關系 element logs 內容點擊切換 osi 圖片 width eight 想寫一個綜合性的小案例，主要會運用到數組和判斷以及我前面幾篇博客所復習到的js的知識。今天案例想要實現的效果圖如下圖所示：效果是：點擊“循環切換”按鈕，那麽“一號”位置的文案就要

Web前端模板（輪播圖排版）

相關推薦