簡單新聞釋出系統前臺介面（html+css）

阿新 • • 發佈：2018-11-17

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

執行效果如下：

圖片素材：

bg.jpg

header_shadow.png

news-icon.png

index.html

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" 
 content="width=device-width, initial-scale=1">    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->    <title>新聞釋出系統</title>    <link rel="stylesheet" href="img/css/index.css">  </head>  <body>    <nav 
 class="navbar">      <div class="container navbar-content">        <a href="#">首頁</a>        <a href="#">關於我們</a>      </div><!-- /.container-fluid -->    </nav>    <img src="img/images/index/bg.jpg" class="index-bg">    <div class="container">      <h1>新聞釋出系統</h1>      <h4></h4>      <div class="news-list">        <div class="news-list-left">          <div class="news-list-item">            <div class="author-time">              <span>慕女神</span> 發表於 <span>2014-07-20 18:07:10</span>            </div>            <div class="news-des">              <h3 class="news-title"><i></i><a href="#">【慕課訪談】美女程式設計師的蛻變史</a></h3>              <div class="news-content-des">                對於技術，她始終熱愛並堅持著，儘管有過苦惱和糾結，但從未輕言放棄。所以今天她可以淡然的說出：人的一生都不會太順利，都要經歷點什麼。                談到經歷過的挫折，她也會眼睛潮溼，也許你會驚訝於這種感性的真情流露，特別是將這種情緒與程式設計師聯絡在一起的時候。而我始終認為，這種真實值得尊敬。                如果你跟女程式設計師提到男程式設計師，可能她們的反應通常是“我們並不比他們差”！而Vivian則對“對手”讚賞有加——“我喜歡和他們交流，他們很有思想，能讓我學到很多東西。”                面對工作得心應手的她，背後有多少努力和付出？她是如何談論哪些沉浸在程式碼世界裡的“男同行們”？現在就帶你走進一個美女程式設計師的世界。              </div>            </div>          </div>          <div class="news-list-item">            <div class="author-time">              <span>慕女神</span> 發表於 <span>2014-07-20 18:07:10</span>            </div>            <div class="news-des">              <h3 class="news-title"><i></i><a href="#">【慕課訪談】美女程式設計師的蛻變史</a></h3>              <div class="news-content-des">                對於技術，她始終熱愛並堅持著，儘管有過苦惱和糾結，但從未輕言放棄。所以今天她可以淡然的說出：人的一生都不會太順利，都要經歷點什麼。                談到經歷過的挫折，她也會眼睛潮溼，也許你會驚訝於這種感性的真情流露，特別是將這種情緒與程式設計師聯絡在一起的時候。而我始終認為，這種真實值得尊敬。                如果你跟女程式設計師提到男程式設計師，可能她們的反應通常是“我們並不比他們差”！而Vivian則對“對手”讚賞有加——“我喜歡和他們交流，他們很有思想，能讓我學到很多東西。”                面對工作得心應手的她，背後有多少努力和付出？她是如何談論哪些沉浸在程式碼世界裡的“男同行們”？現在就帶你走進一個美女程式設計師的世界。              </div>            </div>          </div>          <div class="news-list-item">            <div class="author-time">              <span>慕女神</span> 發表於 <span>2014-07-20 18:07:10</span>            </div>            <div class="news-des">              <h3 class="news-title"><i></i><a href="#">【慕課訪談】美女程式設計師的蛻變史</a></h3>              <div class="news-content-des">                對於技術，她始終熱愛並堅持著，儘管有過苦惱和糾結，但從未輕言放棄。所以今天她可以淡然的說出：人的一生都不會太順利，都要經歷點什麼。                談到經歷過的挫折，她也會眼睛潮溼，也許你會驚訝於這種感性的真情流露，特別是將這種情緒與程式設計師聯絡在一起的時候。而我始終認為，這種真實值得尊敬。                如果你跟女程式設計師提到男程式設計師，可能她們的反應通常是“我們並不比他們差”！而Vivian則對“對手”讚賞有加——“我喜歡和他們交流，他們很有思想，能讓我學到很多東西。”                面對工作得心應手的她，背後有多少努力和付出？她是如何談論哪些沉浸在程式碼世界裡的“男同行們”？現在就帶你走進一個美女程式設計師的世界。              </div>            </div>          </div>          <div class="news-list-item">            <div class="author-time">              <span>慕女神</span> 發表於 <span>2014-07-20 18:07:10</span>            </div>            <div class="news-des">              <h3 class="news-title"><i></i><a href="#">【慕課訪談】美女程式設計師的蛻變史</a></h3>              <div class="news-content-des">                對於技術，她始終熱愛並堅持著，儘管有過苦惱和糾結，但從未輕言放棄。所以今天她可以淡然的說出：人的一生都不會太順利，都要經歷點什麼。                談到經歷過的挫折，她也會眼睛潮溼，也許你會驚訝於這種感性的真情流露，特別是將這種情緒與程式設計師聯絡在一起的時候。而我始終認為，這種真實值得尊敬。                如果你跟女程式設計師提到男程式設計師，可能她們的反應通常是“我們並不比他們差”！而Vivian則對“對手”讚賞有加——“我喜歡和他們交流，他們很有思想，能讓我學到很多東西。”                面對工作得心應手的她，背後有多少努力和付出？她是如何談論哪些沉浸在程式碼世界裡的“男同行們”？現在就帶你走進一個美女程式設計師的世界。              </div>            </div>          </div>        </div>        <div class="news-list-right">          <div class="about">            <h4>關於我們</h4>            <div class="about-des">              <p>本系統使用了pengcheng的微型框架。該微型框架基於MVC框架模式研發，融合了工廠設計模式、註冊模式等設計概念，幫助學員快速掌握MVC理論，提升面向物件技能，培養程式設計思想打下堅實基礎。</p>            </div>          </div>        </div>        <footer class="copyright">          Copyright &nbsp; 2016 DreamBoy All rights reserved.        </footer>      </div>    </div>  </body></html>

index.css

body { margin: 0; padding: 0; font-family:"Microsoft YaHei", "微軟雅黑", "consolas";}a { text-decoration: none; color: #000;}.clearfix {   *zoom: 1; }.clearfix:before, .clearfix:after {   display: table;   line-height: 0;   content: "";}.clearfix:after {   clear: both;} .navbar {    background: url(../images/index/header_shadow.png) no-repeat left top;    background-size: 100% 54px;}.container { width: 1000px; margin: 0 auto;}.navbar .navbar-content a { color: #FFF; line-height: 54px; display: inline-block; width: 100px; text-align: center;}.navbar .navbar-content a:hover { color: #CCC;}.index-bg { width: 100%; height: 500px; position: absolute; top: -50px; z-index: -10;}.news-list { margin: 50px 0; background-color: #FFF; border-radius: 5px; border: 1px solid #DDD; padding: 30px 20px; min-height: 300px;}.news-list:hover { box-shadow: 0 0 5px 3px #CCC;}.about .about-des { border-left: 5px solid #CCC; margin-top: 15px;}.about .about-des p { padding-left: 10px; line-height: 28px; text-indent: 2em;}.news-list-left { float: left; width: 729px; margin-bottom: 50px;}.news-list-right { float: right; width: 229px;}.news-list-item { padding: 20px 30px;}.author-time { font-size: 14px;}.news-des { padding-bottom: 20px; border-bottom: 2px solid #CCC;}.news-title { font-size: 23px;}.news-title i { display: inline-block; width: 47px; height: 43px; margin-right: 10px; background: url('../images/index/news-icon.png') left center no-repeat; vertical-align: middle;}.news-title a { color: green;}.news-title a:hover { text-decoration: underline;}.news-content-des { line-height: 28px;}.copyright { clear: both; text-align: center; color: gray; border-top: 2px solid #CCC; margin-top: 50px; padding: 20px 0;}

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

簡單新聞釋出系統前臺介面（html+css）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

簡易文章釋出系統——前臺介面

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { margin: 0;

問題：關於貼友的一個書本頁面簡單佈局（html+css）的實現

貼友需求：以html+css仿照書本的頁面實現佈局效果（見圖） html程式碼： 1:  2: &

登陸網頁模板 - 1 （HTML+CSS）

pre com href tom .cn clas 網頁模板 html 輸入一個用HTML和CSS寫的簡單登錄頁面，主要是用CSS來進行修飾美化的這個登陸界面有輸入賬號和密碼的表單，還有登陸和註冊兩個按鍵，點擊按鍵分別會輸出“您已成功登陸，稍後會跳轉到您需

CSS深入理解之overflow（HTML/CSS）

clas alt span doc 邊距蘊含 top overflow 會同簡介 overflow看上去其貌不揚，其中蘊含的知識點還是很多的,有很多鮮為人知的特性表現。 overflow基本屬性值 1、visible（默認） 2、hidden 3、scroll 4、

前端讀者 | 前端面試基礎手冊（HTML+CSS）

本文來自@羯瑞；希望前端面試基礎手冊能幫助要找工作的前端小夥伴~~ HTML 前端需要注意哪些SEO？合理的title、description、keywords：搜尋對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；

前端面試經典題目合集（HTML+CSS）

1、瀏覽器頁面有哪三層構成，分別是什麼，作用是什麼? 構成：結構層、表示層、行為層分別是：HTML、CSS、JavaScript 作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。2、HTML5的優點與缺點？優點：

前端面試經典題目合集（HTML+CSS）（一）

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先順序定義為結構性屬性、級塊性元素、行內語義性元素和互動性元素 4 大類。結構性元素主要負責web上下文結構的定義 section：在 web 頁面應用中，該元素也可以用於區域的章節描述。 header：頁

web前端面試題（HTML&CSS）下答案詳解

總結了一下遇到的面試上的問題，希望能幫助到大家【歪脖樹】 1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義? （1）<!DOCTYPE> 宣告位於文件中的最前面，處於 &

手機wap端使用者登錄檔單（html+css）

實現效果： html程式碼： <div class="login"> <form action="*跳轉介面*" method="post" onsubmit="return checkForm()"> <

菜鳥前端日記1（HTML+CSS ）

HTML+CSS HTML HTML超文字標記語言（Hyper Text Markup Language），是一種用於描述網頁文件的準標記語言。副檔名用.html和.htm都可以，但index.html和index.htm是不同的兩個檔案。 HTML

使用者登入和註冊介面（html ajax）

使用者名稱密碼的登入頁面（點選註冊跳轉到註冊頁面） </html>login.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> &l

利用前端三大件（html+css+js）開發一個簡單的“todolist”專案

一、介紹　　todolist，即待辦事項。在windows android ios上參考微軟家出的那個To-Do應用，大概就是那樣的。我這個更簡單，功能只有“待辦” “已完成”兩項，並且是在瀏覽器開啟的。二、介面和檔案結構這些... 　　實際在瀏覽器中的網頁如下：　　　在subline中的檔案結

製作一張簡單的網頁（HTML+CSS+JS) 【2】

在上一篇文章中，我總結了一下HTML，這一篇我把CSS簡單做一下歸納，使網頁變得富有美感。一.CSS樣式的基本知識 1.關於註釋：/*註釋內容*/2.最常見的css樣式格式——嵌入式例如對span裡的內容的字改為藍色：<style type=text/css

製作一張簡單的網頁（HTML+CSS+JS) 【3】

<html> <head> <style type="text/css"> div { font-weight:bold; font-family: M

製作一張簡單的網頁（HTML+CSS+JS）【1】

<img src="圖片的地址” alt="圖片下載失敗後顯示的內容" title="滑鼠滑過該圖片是顯示的提示文字"> 三.認識表單在實際生活中，我們常常會看到一個頁面讓使用者填寫並提交，同樣，我把一些常用的表單標籤列出來。 1.所有我們要寫的單選框、複選框、文字域等等，全部要寫在&l

sublime 插件 Emmet（HTML/CSS代碼快速編寫神器）

targe reference back 陌生 mil 標簽其他 overflow 前端開發 Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的

前端基礎（HTML+CSS+JS）-day12

轉載 xhtml 規範 pla desc 響應狀態 pos 怪異 splay 寫在前面上課第12天，打卡：　　　　理想三旬；前言 HTTP協議：短連接：因為服務器的鏈接數是有限的。如果一直維持一個長鏈接，那麽資源會很快就被耗盡；

前端（HTML/CSS/JS）-JavaScript編碼規範

resource htm 容易 blog 語境 asc 也有命名方式分享 1. 變量命名（1）變量名不應以短巧為榮左邊的變量名都不太清楚，代碼的擴展性不好，一旦代碼需要加功能的話，就容易出現obj1、obj2、obj3這種很抽象的命名方式。所以一開始就要把變

仿豆瓣網首頁（HTML+CSS)

一、放豆瓣網首頁 1.1 douban.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

簡單新聞釋出系統前臺介面（html+css）

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

相關推薦