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

1、前言

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

2、介紹BootStrap

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

你在這裏"BootStrap中文網",能夠很輕鬆的學到BootStrap的基礎樣式設計和佈局設計，講的很詳細我就很少說了。

須要注意的是BootStrap3.0版本是移動端優先的，並且3.0文檔和2.3是不同的。

 

3、易優化(www.easyyh.com)網站佈局

一、首頁

基本上是參照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}

二、百度編輯器UEditor

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

三、關於IE

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

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

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