介紹我最近做的網站 Asp.Net MVC4 + BootStrap

一、前言

最近一直在做一個多站SEO數據分析的站點（www.easyyh.com），用了一些新技術,如Asp.Net MVC4,BootStrap,EasyUI，這些都是以前沒有搞過的，最近搞得差不多了，寫點東西記錄一下，算是一個總結，給自己留個紀念。准備用兩個篇幅，應為MVC4和EasyUI寫的人比較多，先重點寫BootStrap,再寫EasyUI和MVC4。

二、介紹BootStrap

對於我們這些不擅長搞UI又毫無美感的程序猿來說，BootStrap絕對是一個神器啊。它是Twitter的設計師搞出來的一套Css框架，響應式設計，HTML5和CSS3的基礎上搞出來的。

你在這里"BootStrap中文網",可以很輕松的學到BootStrap的基礎樣式設計和布局設計，講的很詳細我就不多說了。

需要注意的是BootStrap3.0版本是移動端優先的，而且3.0文檔和2.3是不一樣的。

 

三、易優化(www.easyyh.com)網站布局

1、首頁

基本上是參照bootstrap官網大屏輪播的列子做出來的，官網列子在這里：http://v3.bootcss.com/examples/carousel/

這里需要注意的是輪播的自動啟動，因我采用的是3.0的版本，輪播插件的啟動方式可以直接寫在html標記里。

注意自動啟動輪播的設置

data-ride="carousel" data-interval="3000"

輪播器完整代碼

<div id="myCarousel" class="carousel slide"  data-ride="carousel" data-interval="3000">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" ></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="/Content/front/img/logobg2.jpg" alt="易優化">
            <div class="container">
                <div class="carousel-caption">
                    <h1>易優化</h1>
                    <h3>輕松管理數百網站</h3>
                    <h3>讓你工作簡單起來</h3>
                    <p>你還在為一個個查詢十幾個網站的關鍵詞、SEO數據而煩惱嗎？</p>
                    <p><a class="btn btn-lg btn-primary" href="/Introduce" role="button">了解更多</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="/Content/front/img/logobg7.jpg" alt="易優化">
            <div class="container">
                <div class="carousel-caption">
                    <h1>易優化</h1>
                    <h3>輕松管理數百網站</h3>
                    <h3>讓你工作簡單起來</h3>
                    <p>你還在為一個個查詢十幾個網站的關鍵詞、SEO數據而煩惱嗎？</p>
                    <p><a class="btn btn-lg btn-primary" href="/Introduce" role="button">了解更多</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

 

輪播器右方的登錄框一個絕對定位的元素，這個在BootStrap沒有找到對應的樣式。樣式代碼如下：

/**登錄框*/
.blackbox{ z-index: 9999; position: absolute; overflow: visible; top:70px; right:200px; background-color:rgba(0,0,0,0.7)!important; filter:Alpha(opacity=70); background:#000; *width:280px; *overflow:inherit;}
.blackbox .hd{ height:40px; line-height:40px;border-bottom:1px solid #ddd;}
.blackbox .hd ul{ float:left; height:40px;list-style:none;margin-left:-10px;*+padding-left:22px;}
.blackbox .hd ul li{ float:left; cursor:pointer; font-family:"Microsoft Yahei","宋體"; font-size:16px; font-weight:bold; color:#fff; width:120px; text-align:left;}
.blackbox .hd ul li.on{ color:#25cfe0;}
.blackbox .bd ul{ padding:5px 15px 5px 15px; zoom:1; list-style:none;margin-left:-4px;}
.blackbox .bd li{ line-height:40px; color:#fff; font-size:14px; padding-top:2px;}
.blackbox .bd li .inp01,.blackbox .bd li .inp02{ padding:2px; border:#000 solid 1px; width:174px; height:30px;*+height:22px; margin:0; line-height:21px; color:#333; }
.blackbox .bd li .inp02{ width:80px;}
.blackbox .bd li .but{ padding-top:10px;}
.blackbox .bd .zhaohui a{ font-size:12px; color:#666}
.blackbox .bd .zhaohui a:hover{ color:#00CCFF}

2、百度編輯器UEditor

百度編輯器確實給力啊，果斷使用，官方地址在這：http://ueditor.baidu.com/website/

3、關於IE

BootStrap3.0對IE8以上提供官方支持，而且IE10以下你是看不到CSS3動畫效果的，萬惡的IE！！！

為了IE考慮，注意頁面Head要添加

<meta http-equiv="X-UA-Compatible" content="IE=edge">