web移动端前端构建（含样式布局，纯净版不含其它样式框架）_html/css

首頁

web前端

html教學

web移动端前端构建（含样式布局，纯净版不含其它样式框架）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

@charset 'utf-8';*{margin:0;padding:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none; } /* highlight equal to outline,only dose it has a effect in google chrome lite browser */*:focus,*:active {outline:none;}html, body {  height:100%;}body{ width: 100%;font-family: \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;-webkit-user-select:none;}p,a,span,textarea,b,input,dt,dd { color: #666;font-size: 0.9rem;}ul, ol{list-style:none;}img{border:none;}a { text-decoration:none;}textarea {resize:none;}input[type=button],button{text-align: center; background: none; border: 0; outline: none; }input { background: white; border: none; outline: none;}/*占位符颜色*/input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#ccc; }input:-moz-placeholder, textarea:-moz-placeholder { color:#ccc; }input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; }input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; }/* 浮动 */.fl { float: left !important; }.fr { float: right !important; }.clear { clear: both; }/* 功能 */.hide { display:none !important; }/*隐藏*/.ellipsis { overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } /* 字数省略 */.keep { position:fixed !important;border-bottom: #ccc 1px solid !important; } /*滚动保持*/.mask {display: none;position: fixed;left: 0;z-index: 11;width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.4);}/*遮罩层*//* 效果 */.shadow,.all-shadow * {box-shadow: 0 0 .3rem #ddd !important;}.gradient,.all-gradient * {background: -webkit-linear-gradient(top, #fff4f4,#fff);}.radius,.all-radius * { border-radius: .2em;}.left-radius {border-top-left-radius: .2em;border-bottom-left-radius: .2em;}.right-radius {border-top-right-radius: .2em;border-bottom-right-radius: .2em;}.top-radius {border-top-left-radius: .2em;border-top-right-radius: .2em;}/* ---------------------------------- 主题A开始 ---------------------------------- *//* 母版样式 */.app{display:table;width:100%;height:100%;}.app>* { display: table-row;  }.app>:nth-child(2) { width: 100%;height:100%; }.app>:first-child,.header{top:0; width: 100%;height: 2.5rem;line-height:2.5rem;}.app>:last-child,.footer{ bottom:0;width: 100%; /*height: 4rem;*/}/*height:无定义高度，当需要页脚时可在当前页定义页脚，并添加标签<div class="footer"></div>即可*/.header,.footer{ position:fixed;display:table;}.header>*{display:table-cell;font-size:1rem;color:white;}.A-color{ color: #00c1d9 }.A-color-gray {color: #ccc}.A-color-error { color: #ff8181 }.A-color-success { color:green }.A-color-disabled { color: #999 }.A-border { border-color: #ccc }.A-border-top{ border-top:1px solid #ccc}.A-border-bottom {border-bottom:1px solid #ccc }.A-border-left { border-left:1px solid #ccc  }.A-border-right{ border-right:1px solid #ccc }.A-bg {background-color:#00c1d9 !important } /* 主题点击效果 */.A-bg-body { background-color: #d9d9d9; } /* 主题body背景 */.A-bg-bar {background-color:#e6e6e6 !important } /* 主题点击效果 */.A-icon-filter{ background: url(/Image/Ico/filter.png) center no-repeat;background-size:1.4rem;}.A-icon-user{ background: url(/Image/Ico/user.png) center no-repeat;background-size:1.4rem;}.A-icon-arrow-down{ background: url(/Image/Ico/arrow_down.png) 1rem center no-repeat;background-size:.8rem .4rem;}.A-btn-all,.A-btn {} /* 主题按钮 */.A-btn-click {background-color:#00b5cb !important } /* 主题点击效果 *//* ---------------------------------- 主题A结束 ---------------------------------- */

asp.net 母版页：

<!DOCTYPE html><html><head>    <meta charset="utf-8" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />    <title>@ViewBag.Title</title>    @Styles.Render("~/Css")    @RenderSection("css", false)</head><body><div class="app">    <div></div>    <div>@RenderBody()</div>    <div></div></div>@Scripts.Render("~/Js")@RenderSection("js", required: false)</body></html>

asp.net 首页：

@{    ViewBag.Title = "首页";}@section css{    <style>        .app > :last-child, .footer { height:2.5rem }        .city-btn { width: 5.5rem;text-indent:2.3rem; }        .filter-btn,.user-btn{ width:3.2rem;}            </style>}<div class="header A-bg">    <a class="city-btn A-icon-arrow-down A-btn"></a>    <h1></h1>    <a class="filter-btn A-icon-filter A-btn"></a>    <a class="user-btn A-icon-user A-btn"></a></div><div class="body"><br />     //...</div><div class="footer A-bg"></div>@section js{    <script>        //...    </script>}

显示结果：

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。