問題:關於貼友的一個書本頁面簡單佈局(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> </div>
37: <div class="btn">
38: <button>10.11 設定字詞間距</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