1. 程式人生 > >問題:關於貼友的一個書本頁面簡單佈局(html+css)的實現

問題:關於貼友的一個書本頁面簡單佈局(html+css)的實現

貼友需求:以html+css仿照書本的頁面實現佈局效果(見圖)


html程式碼:

   1: <!-- 我的部落格:http://www.ido321.com -->
   2: <!DOCTYPE HTML>
   3: <html>
   4:     <head>
   5:         <meta http-equiv="content-type" content="text/html;charset=utf-8">
   6:         <title>Test</title>
   7:         <
meta name="author" content="淡忘~淺思">
   8:         <link rel="stylesheet" type="text/css" href="shuben.css">
   9:     </head>
  10:     <body>
  11:         <div class="content">
  12:             <p class="text">
  13:                 我的部落格:<a href="http://www.ido321.com"
target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。
  14:             </p>
  15:             <div class="code">
  16:                 <pre style="margin-left:-250px">
  17:                     #p2{
  18:                         padding-left:2em;
  19:                         text-indent:-2em;
  20:                     }
  21:                 </pre>
  22:             </div>
  23:             <p class="text">
  24:                 我的部落格:<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。我的部落格:<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。
  25:             </p>
  26:             <div class="imgDiv">
  27:                 <div class="left">
  28:                     <img src="1.jpg">
  29:                     <p>圖1:XXXXXX</p>
  30:                 </div>
  31:                 <div class="right">
  32:                     <img src="1.jpg">
  33:                     <p>圖2:XXXXXX</p>
  34:                 </div>
  35:             </div>
  36:             <div>&nbsp;</div>
  37:             <div class="btn">
  38:                 <button>10.11&nbsp;&nbsp;&nbsp;&nbsp;設定字詞間距</button>
  39:             </div>
  40:             <p class="text">
  41:                 我的部落格:<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。
  42:             </p>
  43:             <p class="text">
  44:                 我的部落格:<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。
  45:             </p>
  46:             <div class="footer">
  47:                 <div class="code2">
  48:                     <div style="background-color: #ccc;">
  49:                             <p style="margin-left:1.5em">
  50:                                 #p2{<br/>
  51:                                 padding-left:2em;
  52:                                 text-indent:-2em;<br/>
  53:                                 }
  54:                             </p>
  55:                     </div>
  56:                     <p class="text">
  57:                         我的部落格:<a href="http://www.ido321.com" target="_blank">www.ido321.com</a>.程式愛好者QQ群:259280570,如果你是coder,歡迎你加入我們。如果你是coder,歡迎你加入我們。
  58:                     </p>
  59:                 </div>
  60:                 <div class="footerright">
  61:                     <img src="1.jpg">
  62:                     <p>圖3:XXXXXX</p>
  63:                 </div>
  64:             </div>
  65:         </div>
  66:     </body>
  67: </html>

css程式碼:

   1: *{
   2:     margin:0 auto;
   3:     padding: 0;
   4: }
   5: .content{
   6:     width: 600px;
   7:     height: 1000px;
   8: }
   9: .text{
  10:     word-wrap:break-word;
  11:     text-indent: 2em;
  12:     line-height: 1.5em;
  13: }
  14: a{
  15:     color: red;
  16:     font-weight: bold;
  17: }
  18: a:link,a:hover{
  19:     text-decoration: none;
  20: }
  21: .code{
  22:     background-color: #ccc;
  23:     width: 100%;
  24: }
  25: .imgDiv{
  26:     margin-left: 1em;
  27:     margin-top: 1em;
  28:
  29: }
  30: .left{
  31:     float: left;
  32: }
  33: .right{
  34:     float: left;
  35:     margin-left: 1.5em;
  36:     margin-bottom: 2em;
  37: }
  38: .btn{
  39:     clear: both;
  40:     -ms-box-shadow: -5px -5px 5px #888888;
  41:     -moz-box-shadow: -5px -5px 5px #888888;
  42:     -webkit-box-shadow: -5px -5px 5px #888888;
  43:     -o-box-shadow: -5px -5px 5px #888888;
  44:     box-shadow: -5px -5px 5px #888888;
  45: }
  46: button{
  47:     text-align: left;
  48:     width: 100%;
  49:     font-weight: bold;
  50:     font-size: 30px;
  51: }
  52: .footer{
  53:     margin-top: 1.5em;
  54: }
  55: .code2{
  56:     width: 50%;
  57:     float: left;
  58: }
  59: .footerright{
            
           

相關推薦

問題關於一個書本頁面簡單佈局html+css實現

貼友需求:以html+css仿照書本的頁面實現佈局效果(見圖) html程式碼: 1: <!-- 我的部落格:http://www.ido321.com --> 2: &

自己製作頁面編輯器js+css

編輯器都有什麼功能。文字加粗,上傳圖片,改變大小等等。此例僅包含文字加粗和圖片上傳。 首頁你要知道html標籤中的contenteditable="true"屬性,不知道的自行去百度。(可讓div可編輯) 其次知道js的document.execCommand(),不知道的自行去百度(可以實

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

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

簡單簡歷css

以下為簡歷的程式碼,後面那麼多重複的文字是能夠使當點選左側的導航欄的時候,效果會更明顯。比如點選技能特長的時候,右邊的技能特長就會處於當前頁的首行。<!DOCTYPE html> <html> <style> header{ b

補碼(為什麽按位取反再加一)告訴你一個其實很簡單的問題

滿足 所有 我們 進位 數字 樂意 如果 二進制 關系   首先,閱讀這篇文章的你,肯定是一個在網上已經糾結了很久的讀者,因為你查閱了所有你能查到的資料,然後他們都會很耐心的告訴你,補碼:就是按位取反,然後加一。準確無誤,毫無破綻。但是,你搜遍了所有俯拾即是而且準確無誤的答

netty報錯遠端主機強迫關閉了一個現有的連線。已解決

昨天,java 整合netty服務的專案,在測試伺服器上,發現了一個問題: 1.專案netty包版本:netty-all-5.0.0.Alpha1.jar。 2.問題的描述:伺服器啟動,各種通訊正常,執行一段時間,大概10分鐘後,這個問題就出現了,並且客戶端傳送上來的資料,不再收到回寫資

web頁面常用佈局pc端佈局和移動端佈局

web頁面常用佈局(pc端佈局和移動端佈局) 什麼是web佈局呢? 佈局也可以叫做排版,它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上,佈局的方式分為兩種: 1、table佈局:通過table元素將頁面空間劃分成若干個單元格,將文字或圖片等元素放入單元格中,隱藏表格的邊框

設計模式2——建立型——工廠相關簡單工廠Simple factory,工廠方法Factory method,抽象工廠Abstract factory

概要 這裡試圖描述23個設計模式中的兩個工廠(Factory)相關的設計模式:工廠方法(Factorymethod),抽象工廠(Abstract factory)。 注意點: 這兩個都屬於建立型設計模式。 由於這兩個設計模式都

.Net MVC 中_Layout.cshtml頁面佈局轉載

作為一個剛剛開始學習Mvc的新人來說,從之前的winform頁面到現在MVC的轉變,感覺這是華麗麗的轉身啊,再沒有拖拽控制元件,轉而是一種規範的格式,用Model-View-Controller三者把一個系統的構成完美呈現,你可以選擇用其自帶的模版來完成系統的開發,很強大,很方便。  

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

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

html,css,js實現簡單頁面應用

主要實現三個方面(主頁,登陸頁,註冊頁,新聞詳情頁) 主頁包括(上面的導航欄,中間資訊分類,資訊詳情和資訊推薦) 1.主頁 <!DOCTYPE html> <html lang="en"> <head> <met

React Native佈局使用Flexbox

歡迎一起來學習React Native,QQ群:672509442 簡介 我們在React Native中使用flexbox規則來指定某個元件的子元素的佈局。Flexbox可以在不同螢幕尺寸上提供一致的佈局結構。相對於Native開發的佈局更加

6-3 簡單求和10 分 本題要求實現一個函式,求給定的N個整數的和。

int Sum ( int List[], int N ){  int sum=0;  for(int i=0;i<N;i++)  {    sum+=List[i];  }  return sum;}list的L大寫還有N,就醬。

CSS/HTML 一個漂亮的使用者註冊使用者登入頁面 動態效果

先上效果圖吧平面泡沫立體泡沫之前想做動態泡泡的效果,在網上沒有搜到類似的樣式。所以自己做了一個發上來,給有需要的人蔘考參考。程式碼部分有疑問或者有錯請在評論指出,儘量快點回復。程式碼部分:(無奈,發程式碼格式一直亂碼)<!DOCTYPE html><html

記錄一個格式發郵件時顯示郵件聯絡人名稱暱稱

一直在用javax.mail發郵件,但是我的郵件顯示的都是郵件地址,像其它服務郵箱,京東,淘寶之類的都顯示的是名稱。很奇怪。 百度之,網上沒有類似。 百度之好久,發現有人說是需要用固定的格式填充From屬性。 // 設定收件人,寄件人 String n

一個動態的表單頁面JS+CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

騰訊面試題模板實現一個棧,要求Push入棧,Pop出棧,Max返回最大值的操作的時間複雜度為O(1)

解題思路:要用模板實現亂序入棧的陣列每次pop()出棧都能得到當前棧中Max的最大值,就必須在push()入棧時進行維護操作,使的每次入棧的元素都能夠找到合適的位置並push(),每次push()操作完成後棧中的元素都能夠按從棧頂到棧底從大到小排列即可。這就需要寫一個不同於常

C# Queue與RabbitMQ的愛恨情仇文末附原始碼Q與MQ訊息佇列簡單應用

首先我們簡單瞭解一下什麼堆、棧、佇列。 堆是在程式執行時,而不是在程式編譯時,申請某個大小的記憶體空間。即動態分配記憶體,對其訪問和對一般記憶體的訪問沒有區別。 棧就是一個容器,後放進去的先拿出來,它下面本來有的東西要等它出來之後才能出來。(先進後出or後進先出) 佇列只能在隊頭做刪除操作,在隊尾做插入操作.

C# Queue與RabbitMQ的愛恨情仇文末附原始碼Q與MQ訊息佇列簡單應用

上一章我們講了佇列( Queue),這一章我們講Message Queue訊息佇列,簡稱MQ。 定義:   MQ是MessageQueue,訊息佇列的簡稱(是流行的開源訊息佇列系統,利用erlang語言開發)。MQ是一種應用程式對應用程式的通訊方法。 應用程式通過讀寫入隊和出隊的訊息來通訊,無

JavaScript設計模式一、面向對象編程第二節

得到 調用 帶來 方式 get 特權 style 方法封裝 面向對象 一、封裝 面向對象編程思想其中的一個特點就是封裝,通俗的講法就是把需要的功能方向在一個對象裏。遺憾的是,對於JS這種解釋性的弱類型語言沒有經典強類型語言中那樣通過class等關鍵字實現類的封裝方法,j