zoukankan      html  css  js  c++  java
  • Bootstrap 网页2

    html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>网站实例</title>
    		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    		
    		<link rel="stylesheet" href="css/bootstrap-maizi.css" />
    	</head>
    	<body>
    		<!--导航-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!--小屏幕导航按钮和logo-->
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand">理工学院</a>
            </div>
            <!--小屏幕导航按钮和logo-->
            <!--导航-->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#bbs">论坛</a></li>
                    <li><a href="#html5">前端开发</a></li>
                    <li><a href="index.html">后台开发</a></li>
                    <li><a href="index.html">移动APP</a></li>
                    <li><a href="index.html">联系我们</a></li>
                </ul>
            </div>
            <!--导航-->
    
        </div>
    </nav>
    <!--导航-->
    
    <!--home-->
    
    <section id="home">
        <div class="lvjing">
            <div class="container">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                     <h1>广州理工学院欢迎您!</h1>
                        <p>
                        一技之长加综合素质<br/>
                           学习技能的目标:成为一个有用的人
                        </p>
                        <img src="img/学校.jpg" class="img-responsive" alt="php"></img>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </section>
    <!--home-->
    <section id="bbs">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="http://www.maiziedu.com" target="_blank">
                        <img src="img/a.png" class="img-responsive" alt=""/>
                        <h3>Android开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例分享</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="http://www.maiziedu.com" target="_blank">
                        <img src="img/i.png" class="img-responsive" alt=""/>
                        <h3>IOS开发</h3>
                        <p>iOS开发技术交流,海量iOS实战干货分享</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="http://www.maiziedu.com" target="_blank">
                        <img src="img/b.png" class="img-responsive" alt=""/>
                        <h3>嵌入式底层开发</h3>
                        <p>底层嵌入式开发、实战案例等技术交流讨论</p>
                    </a>
                </div>
            </div>
        </div>
    </section>
    	
    <section id="html5">
    	<div class="container">
    		<div class="row">
                <div class="col-md-6">
                
                		<h2>HTML5前端开发</h2>
                	<p>一线资深前端开发工程师倾情打造!助你完成普通程序员到优秀工程师的华丽升级</p>
                	    <p><span class="glyphicon glyphicon-heart mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                <p><span class="glyphicon glyphicon-heart mai-icon"></span>清晰明了的语义代码结构,更高的可读性、更利于页面维护的。</p>
                </div>
                <div class="col-md-6">
                	 <img src="img/html5.jpg" class="img-responsive" alt=""/>
                </div>
    	</div>
    </section>	
    
    	<section id="bootrap">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-6">
    					 <img src="img/Bootstrap.jpg" class="img-responsive" alt=""/>
    				</div>
    				<div class="col-md-6">
    					
    					<h2>bootstrap实战视频教程</h2>
    					<p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。</p>
    					 <p><span class="glyphicon glyphicon-heart mai-icon"></span>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。</p>
                <p><span class="glyphicon glyphicon-heart mai-icon"></span>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档</p>
    				</div>
    			</div>
    		</div>
    	</section>	
    	
    	<section id="course">
    		<div class="container">
    			<div class="row">
    				<div class="col-md-12">
    					<h2>最新课程</h2>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				<div  class="col-md-3">
    					<div class="course"> 
    						<img src="img/swift.jpg" class="img-responsive" alt=""></img>
    						  <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
                            加入学习
                        </a>
    					</div>
    				</div>
    				
    		</div>
    		</div>
    	</section>
    	<section id="app">
    		<div class="container">
    			
    			<div class="row">
                <div class="col-md-6">
                	<h2>理工学院移动APP下载</h2>
                	<p>全新UI交互,与新网站数据同步,更加丰富的课程,开启精彩无限,语音搜索课程,喊出你想要的课程,一件收藏,方便自己重复学习,离线下载课程,在哪儿都能开! </p>
                	   <button class="btn btn-default" id="button">
                        <span class="glyphicon glyphicon-download-alt"></span>
                        iPhone版
                    </button>
                    <button class="btn btn-default" id="button">
                        <span class="glyphicon glyphicon-download-alt"></span>
                        Android版
                    </button>
                </div>
                 <div class="col-md-6">
                 	<img src="img/app-banner.jpg" class="img-responsive" alt=""/>
                </div>
    			</div>
    		</div>
    		
    	</section>	
    	
    <section id="contact">
    	<div class="lvjing">
    		<div class="container">
    			<div class="row">
    			          <div class="col-md-6">
    			          	  <h2>
    			          	   <span class="glyphicon glyphicon-flag"></span>
                             
                            联系学校
    </h2>
    <p>广州番禺职业技术学院(原名番禺理工学院、番禺职业技术学院)1993年筹建,1997年9月教育部正式批准备案,是全国首批、广州市属第一所公办全日制普通高等职业院校。2003年被广州市政府确定为市属高等职业教育龙头院校</p>
                        <address>
                            <p>
                                <span class="glyphicon glyphicon-home"></span>
                                 
                                地址:广东省广州市番禺区沙湾镇
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-phone-alt"></span>
                                 
                                联系电话:028-123456
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-envelope"></span>
                                 
                                邮箱:123456789@qq.com
                            </p>
                        </address>
    
                           </div>
                           <div class="col-md-6">
                        <form action="#" method="post">
                            <div class="col-md-6">
                                <input type="text" class="form-control" placeholder="您的姓名"/>
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="您的邮箱"/>
                            </div>
                            <div class="col-md-12">
                                <input type="text" class="form-control" placeholder="标题"/>
                            </div>
                            <div class="col-md-12">
                                <textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
                            </div>
                            <div class="col-md-8">
                                <input type="submit" class="form-control" value="提交"/>
                            </div>
                        </form>
                    </div>
    
    			</div>
    		    </div>
    			</div>
          </div>
    </section>
    	
    	<footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4
                    </p>
                </div>
            </div>
        </div>
    </footer>
    
    	
    	
    	
    	
    <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    	</body>
    </html>
    

      css

    body{
        font-family: 'Microsoft YaHei', sans-serif;
    }
    .navbar-default{
        background-color: #fff;
        border: none;
        box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25);
    }
    .navbar-default .navbar-brand {
        font-size: 30px;
        font-weight: bold;
        color: #40D2B1;
        height: 70px;
        line-height: 35px;
    }
    .navbar-default .navbar-nav>li>a {
        font-size: 16px;
        font-weight: bold;
        color: #666;
        height: 70px;
        line-height: 35px;
    }
    .navbar-toggle{
        margin-top: 17px;
    }
    
    .navbar-default .navbar-toggle:hover {
        border-color: #40D2B1;
        
        background-color:rgba(32, 216, 148, 0.7);
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #1C9982;
    }
    /*home*/
    #home{
        margin-top: 70px;
        background: url("../img/home-bg.jpg");
        background-size: cover;
        color: #ffffff;
        text-align: center;
         100%;
    }
    .lvjing{
         100%;
        height: 100%;
        background: rgba(32, 216, 148, 0.7);
        padding: 90px 0;
    }
    #home h1{
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 25px;
    }
    #home p{
        font-weight: 400;
        line-height: 35px;
    }
    #home img{
        height:500px ;
        margin-top: 30px;
        display: inline-block;
    }
    #bbs{
        padding: 80px 0;
        text-align: center;
    }
    #bbs .col-md-4{
        padding: 15px;
    }
    #bbs .col-md-4:hover{
        background: #f1f1f1;
        box-shadow: 1px 1px 4px #ccc;
    }
    #bbs a{
        color: #212121;
        text-decoration: none;
    }
    #bbs img{
        margin: 0 auto;
    }
    
    #bbs h3{
        font-weight: bold;
    }
    /*HTML5*/
    #html5{
        background: #f8f8f8;
        padding: 80px 0;
    }
    #html5 h2{
        font-weight: bold;
    }
    #html5 p{
        line-height: 40px;
    }
    #bootrap {
    	   padding: 80px 0;
    }
    #bootrap h2 {
    	 font-weight: bold;
    }
    #bootrap  P {
    	 line-height: 40px;
    }
    #course {
    	 background: #f8f8f8;
         padding: 80px 0;
         text-align: center;
    }
    #course h2 {
    	font-weight: bold;
    	padding-bottom:60px ;
    }
    #course .col-md-3{
        margin-bottom: 20px;
    }
    .course {
        background: #ffffff;
    }
    #course .btn{
        background: transparent;
        color:seagreen;
        padding:8px 40px;
        margin-top:20px ;
          border-radius: 0px;
           transition: all 0.3s;
        margin-bottom:30px ;
         border: 1px solid rgb(136, 227, 207);;
        
    }
    #course .btn:hover {
    	background-color:rgb(136, 227, 207); ;
    	color: #fff;
    }
    #app {
    	    padding: 80px 0;
         
    }
    #app   h2 {
    	font-weight: bold;
    	padding-bottom:30px ;
    }
    #app p {
    		padding-bottom:10px ;
    }
    #app #button {
    	150px;
        background:rgb(136, 227, 207);
        
        color: white;
    	
    }
    #contact {
    	background:url(../img/学校.jpg) no-repeat;
    	background-size: cover;
        color: white;
        background-color: white;
        height: 500px;
    }
    #contact h2{
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 25px;
    }
    #contact p{
        line-height: 25px;
        margin-bottom: 20px;
    }
    #contact .form-control {
        border: none;
        border-radius: 0;
        height: 50px;
        margin-bottom: 20px;
    }
    #contact textarea.form-control{
        height: auto;
    }
    #contact input[type="submit"]{
        background: #40D2B1;
        color: #fff;
        font-weight: bold;
        transition: all 0.3s;
    }
    #contact input[type="submit"]:hover{
        background: rgb(44, 142, 120);
    }
    footer{
    	height:400px ;
        font-weight: 400;
        text-align: center;
        padding:20px

    图片:

        

        

  • 相关阅读:
    LinkButton(按钮)
    清理SharePoint 2010的SQL Server 2008 R2日志数据库的方法
    Sharepoint日志文件增长巨大的解决办法/缩小日志/删除日志
    PDF2SWF简单使用
    SharePoint 2010 网站备份还原简单介绍
    SolidWorks二次开发的研究
    基于VB语言对SolidWorks参数化设计的二次开发
    什么是PDM?
    SharePoint 2010配置PDF文件全文检索
    《博客园精华集--Sharepoint分册》第三轮结果(转)
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7565493.html
Copyright © 2011-2022 走看看