介绍我最近做的网站 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:; 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:; 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:; 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">
介绍我最近做的网站 Asp.Net MVC4 + BootStrap的更多相关文章
- [转]ASP.NET MVC4+BootStrap 实战(一)
本文转自:http://leelei.blog.51cto.com/856755/1587301 好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没 ...
- ASP.NET MVC4+BootStrap 实战(一)
好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没有实战web项目的机会.大D也辞职了,去搞web app了.自己也该闲暇时间多学习学习,每天进步一 ...
- 介绍一款非常适合做微网站并且免费的CMS系统
在微网站火热的今天,寻找一款具备 web app功能的CMS系统能够大大提高我们的工作效率,eBSite升级到3.0后,开始支持web app 皮肤,也就是创建一个站点,会同时绑定一个PC版皮肤与一个 ...
- ASP.NET CORE做的网站运行在docker实践
用VS2017 建立了 DotNet Core 2.2 的网站后,如何转移到 Docker 下运行? 下面分两种方式来实践: 1.直接手动命今行,将本机目录映射进Docker,运行网站.2.制作 Im ...
- ASP.NET MVC 做的网站项目
感谢博客园团队日夜为广大需要获取知识人们所做的奉献 博客园团队您们辛苦了 ASP.NET MVC 实现有论坛功能的网站(有iis发布网站 这是之前写的... www.lazyfitness.cn 经过 ...
- Asp.Net MVC4新特性指南(2):新特性介绍
上一章讲解了最基本的MVC4说明.今天就介绍下几种新特性的使用例子: 就当大家有MVC3的基础了.在这个基础上在看下面的介绍就容易多了.1.Web API MVC4包括一个更好的解决方案:A ...
- ASP.NET MVC4中的App_start中BundleConfig的介绍使用
在BundleConfig.cs中,指定CSS和JS,主要用来压缩JS和CSS 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压 ...
- 从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程
从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程 用户登录与权限验证是网站不可缺少的一部分功能,asp.net MVC4框架内置了用于实现该功能的类库,只需要简单搭 ...
- 【翻译转载】【官方教程】Asp.Net MVC4入门指南(1): 入门介绍
1. Asp.Net MVC4 入门介绍 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/ ...
随机推荐
- java-02 for循环,while循环
###############获取一个数字的每位数字############### #############1-100奇数和偶数和############## public class Sum { ...
- 「BZOJ2721」「LuoguP1445」 [Violet]樱花(数论
题目背景 我很愤怒 题目描述 求方程 $\frac{1}{x}+\frac{1}{y}=\frac{1}{N!}$ 的正整数解的组数,其中$N≤10^6$. 解的组数,应模$1e9+7$. 输入输出格 ...
- 【Lintcode】113.Remove Duplicates from Sorted List II
题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...
- gitea (git服务器), 修改配置,更换IP地址
使用的gitea项目管理git 服务器 (可以不用备份项目, 通过直接修改gitea配置, 直接使用) 步骤1 可以直接访问项目, 步骤2 ,如果已有项目IP地址固定为192.168.1.x, 新的I ...
- iView之清空选择框
Form表单布局的vue组件,已经增加了校验选择框,判断为空的情况下不调用接口. 后来发现,选择了选择框后,清空,再点查询,还是会调接口,看日志发现传了原来清空的值过来,实际上没有清空. 这里增加on ...
- hive-0.11.0安装
一.安装 . 下载安装hive hive-0.11.0.tar.gz(稳定版) 目录:/data tar –zxvfhive-0.11.0.tar.gz . 配置 把所有 ...
- CodeForces 489B BerSU Ball (水题 双指针)
B. BerSU Ball time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 文件解析库doctotext安装和使用
安装doctotext 1 安装GCC到4.6以上 tar jxf gcc-4.7.0.tar.bz2 cd gcc-4.7.0 编译 ./contrib/download_prerequisites ...
- 10天彻底搞定-webpack4.0
本机存放的路径: F:\教程\10天彻底搞定-webpack4.0 联想电脑代码存放的路径: D:\MyDemos\webpack4 10天彻底搞定-webpack4.0 1.webpack课程介绍 ...
- starUML建立时序图
对于经常看项目代码或者写项目的人.时序图可以帮助理解.记录项目.设计项目等用途. 1.starUml下载安装比较简单,这里不再赘述.打开starUml 2. 在Model Explorer 中,在Un ...