整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web前端教程:簡單實用的CSS網頁布局中文排版技巧

          由于漢字的特殊性,在css網頁布局中,中文排版有別于英文排版。排版是一個麻煩的問題,小編認為,作為一個優秀的網頁設計師和網頁制作人員,掌握一些簡單的中文排版技巧是不可或缺的,所以今天特意總結了幾個簡單實用的技巧,希望對大家有所幫助。

          Web前端教程

            一、如何設定文字字體、顏色、大小等

            font-style設定斜體,比如font-style:italic

            font-weight設定文字粗細,比如font-weight:bold

            font-size設定文字大小,比如font-size:12px

            line-height設定行距,比如line-height:150%

            color設定文字顏色,注意不是font-color喔,比如color:red

            font-family設定字體,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif

            二、使用margin,text-align 控制段落

            中文段落使用p標簽,左右、段前段后的空白,都可以通過margin來控制。

            比如

            p{

            margin:18px 6px 6px 18px;/*分別是上、右、下、左,十二點開始的順時針方向*/

            }

            而text-align則用于文字的對齊方式。

            比如

            p{

            text-align:center;/*居中對齊*/

            }

            除了居中對齊之外,對齊方式還有左對齊、右對齊和兩端對齊,對應的屬性值分別為left、right、justify。

            提示:由于默認的margin值會導致頁面排版出現問題,特別是ul、ol、p、dt、dd等標簽。小編的解決之道就是把所有標簽的margin值定義為0。

            三、豎排文字—使用writing-mode

            writing-mode屬性有兩個值lr-tb和tb-rl,前者是默認的左-右、上-下,后者是上-下、右-左。

            寫法如

            p{

            writing-mode:tb-rl;

            }

            四、使用list-style美化列表

            如果我們的排版涉及到列表,不妨考慮為它添加些項目符號進行美化。

          在CSS里,項目符號包括disc(實心圓點)、circle(空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無)。

            嘿嘿!我們可用的項目符號數量不少喔,但美中不足的是我們不能為它們設定大小,也不能設定垂直方向上的對齊。

            如果我們想設定一個列表的項目符號為方塊,可以這樣寫:

            li{

            list-style:square;

            }

            小編在這里提醒大家一下:當一個項目列表的左外邊距設為零的時候,list-style-position:outside的項目符號不會顯示。

            五、使用text-overflow 實現固定寬度漢字截斷

            用后臺語言可以對從數據庫里的字段內容做截斷處理,如果想對列表應用該樣式,我們可以這樣寫:

            li{

            overflow:hidden;

            text-overflow:ellipsis;

            white-space:nowrap;

            }

            六、首字下沉

            如果你想制作首字下沉效果,不妨考慮偽對象:first-letter并配合font-size、float屬性。

            p:first-letter{

            padding:6px;

            font-size:32pt;

            float:left;

            }

            七、首行縮進—使用text-indent

            text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。

          可以這么寫

            p{

            text-indent:2em;/*em是相對單位,2em即現在一個字大小的兩倍*/

            }

            注意:如果font-size是12px的話,那么text-indent:2em則代表縮進24px。

            八、固定寬度漢字(詞)折行—使用word-break

            在排版的時候,你是否為一個詞組,其中一個字出現在上面而另一個字折斷到下一行去而發愁呢?不用愁,這時使用word-break就可以輕松解決問題了。

            九、關于漢字注音—使用ruby標簽和ruby-align屬性

            最后小編向大家介紹一下ruby標簽和ruby-align屬性 。這是一個比較冷門的技巧,可能平時使用不多,但小編覺得不妨提供給大家預防不時之需。

            如果我們想為漢字注音就可以這樣寫

            <ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

            然后通過ruby-align設置其對齊方式。

          以上就是今日整理的“Web前端教程:簡單實用的CSS網頁布局中文排版技巧”一文,希望為正在學習Web前端的同學提供參考。你記住并理解了嗎?以后酷仔每日均會提供MySQL、Python及Web相關的教程及習題,趕快學習起來吧。

          TML是什么

          HTML的全稱是超文本標記語言,英文全稱是HyperText Markup Language。如果您是零基礎的話,看到這個名字,即使是漢語的,估計也會不知所云。

          超文本指的是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起,這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念,可以說網絡的精髓就在于"互聯"。

          這些相互關聯的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接,為人們查找,檢索信息提供方便。(孫素華編著.Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通:中國青年出版社,2014.10:第16頁)

          標記語言的概念比較復雜,簡單來說,HTML并不是程序語言(不同于C或Python),只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。

          如果讀的不太明白,在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示,如果您讀不懂可以盡情的跳過,畢竟我們的重點是怎么用。

          HTML基本框架

          HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面,就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下:

          <!DOCTYPE HTML><html> <head> </head> <body> </body> </html>

          第一行 <!DOCTYPE HTML>

          第二行 <html>

          第三行 <head>

          第四行 </head>

          第五行 <body>

          第六行 </body>

          第七行 </html>

          這七行代碼是所有HTML頁面所共有的,也就是HTML的框架了。不信我們來驗證一下。

          例子一,頭條的文章頁面(電腦版)網址:https://www.toutiao.com/i6785149184245760516/

          筆者使用Firefox(火狐)瀏覽器,輸入網址后點擊鍵盤上的F12,,如圖所示

          我們可以看到頁面下半部分出現了一個調控臺。

          點擊查看器即可看頁面代碼。代碼如下:

          放大一些,大家看看,<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少,只是中間多了很多內容而已。

          一個例子不具有普適性,下面我們再看一個例子,我隨便找了個新聞頁面,網址:https://mil.eastday.com/a/200125113254400.html

          使用同樣的方法打開查看器看代碼,如圖:

          是不是框架中的代碼一個也不少吧。

          所以,大家請在自己的電腦中新建一個txt文件,將HTML框架粘貼到txt文件中,并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。

          通過對框架中的代碼進行觀察,細心的讀者可能已經發現了HTML這種標記語言的書寫規律。

          規律1:每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一,大家一定記牢。

          規律2:除了<!DOCTYPE HTML>這個標簽外,其他標簽都是成對出現!例如<html>與</html>,<head>與</head>,<body>與</body>。

          規律3:這個規律通過觀察代碼也不難發現,即<html></html>兩個標簽中間夾著<head></head>和<body></body>,我們把<head></head>標簽稱為<html></html>標簽的子標簽,反過來<html></html>標簽是<head></head>標簽的父標簽,<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句,屬于六親不認的。

          各種關系如下圖所示:

          這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言",這種父子關系、兄弟關系就可以理解為一個頁面的"結構",這種結構又與頁面的排版有關。

          在下一期中,我們會通過練習來解釋"結構"與排版的關系。

          喜歡的小伙伴請加關注,有任何問題可以留言給我,歡迎指正批評,感激不盡!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          一篇介紹了網頁的基本結構,那如何編寫網頁的內容? 前提是要學會HTML標簽的用法,本篇主要介紹HTML標簽是什么,如何學習,需要大概多長時間學習。

          本篇主要基于html5介紹,html5 是最新版的標準,之前的版本可以自己了解下。

          HTML 簡介

          HTML的英文全稱是Hyper Text Markup Language,直譯為超文本標記語言。它是全球廣域網上描述網頁內容和外觀的標準。HTML包含了一對打開和關閉的標記,在當中包含有屬性和值。標記描述了每個在網頁上的組件,例如文本段落、表格或圖像等。

          事實上,HTML是一種因特網上較常見的網頁制作標注性語言,而并不能算做一種程序設計語言,因為它缺少程序設計語言所應有的特征。HTML通過IE等瀏覽器的翻譯,將網頁中所要呈現的內容、排版展現在用戶眼前。

          一個html標簽基本結構如下:

          <標簽名稱  屬性="屬性值"></標簽名稱> 或 <標簽名稱 屬性="屬性值"/>

          有以下特點:

          1. 由尖括“<”、“>”號包圍的標記元素,比如 <html>和</html>就是一對標記。
          2. 通常是成對出現的,比如 <div> 和 </div>,也有單獨呈現的標簽,如:<img />、<input/>等。
          3. 標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽;
          4. 一般成對出現的標簽,其內容在兩個標簽中間,如<h1>標題</h1>。單獨呈現的標簽,則在標簽屬性中賦值,如<input type="text" />。
          5. 網頁展示的內容需寫在<body>標簽中。
          6. 標簽不區分大小寫,建議按規范小寫。

          HTML標簽按功能大體可分以下幾種類型:

          1. 構成網頁基本架構的標簽,比如:<!DOCTYPE>(定義文檔類型)、<html>(根標簽),<meta>(元信息)、<head> (網頁頭部區域)、<body> (網頁內容區域)。
          2. 用于引入外部資源客戶端腳本的標簽,比如:<link>(外部資源,css樣式文件), <script>(客戶端js腳本)。
          3. 用于描述布局的標簽,比如: <div>、<ul>(無序列表)、<ol>(有序列表)、<h1>到<h6>(標題1到6)、<table>(表格)、<footer>(頁腳)、<header>(頁頭)等。
          4. 用于描述文本格式的標簽,比如:<p> (段落)、<strong>(加粗)、<q>(引用)、<span>等。
          5. 用于引入多媒體資源的標簽,比如:<img>、<video>、<audio>等。
          6. 用于制作表單的標簽,比如:<form>(表單),<input>(輸入框),<textarea>(文本域),<select>(下拉菜單),<radio>(單選項),<checkbox>(多選項)等。
          7. 其它標簽(不是很常用的)。

          如何學習html的標簽用法

          沒有捷徑,需要多看,多練。在這里我不一一介紹每個標簽的具體含義及用法,相關語法可以參考以下幾個網站:

          1. https://www.w3cschool.cn/html5/
          2. https://developer.mozilla.org/zh-CN/docs/Web/HTML

          制定一個學習計劃,每天堅持下去

          要求,每天花費3到5個小時學習,至少1到2周掌握常用的html標簽含義及用法,可以按照上面介紹的標簽進行分類學習,感謝關注,祝你學習愉快。


          主站蜘蛛池模板: 一区二区三区日韩精品| 午夜影院一区二区| 亚洲美女视频一区二区三区 | 亚洲爽爽一区二区三区| 国产福利一区二区三区在线视频| 香蕉久久AⅤ一区二区三区| 成人中文字幕一区二区三区| 亚洲爆乳无码一区二区三区| 果冻传媒一区二区天美传媒| 亚洲高清偷拍一区二区三区| 国产一区韩国女主播| 亚洲一区二区三区高清不卡| 一区二区免费电影| 国产精品无码一区二区三区毛片| 久久一区二区免费播放| aⅴ一区二区三区无卡无码| 亚洲av日韩综合一区久热| 精品无码av一区二区三区| 亚洲AV午夜福利精品一区二区| 中文字幕国产一区| 国产一区二区精品久久| 免费日本一区二区| 久久综合精品不卡一区二区| 亚洲无线码在线一区观看| 国产裸体歌舞一区二区| 国产一区二区三区在线看| 国产成人无码一区二区在线播放| 国精产品一区一区三区免费视频| 国精产品一区一区三区免费视频| 日本不卡在线一区二区三区视频| 亚洲AV无码一区二区二三区软件| 91精品国产一区| 亚洲国产精品无码第一区二区三区 | 久久久91精品国产一区二区| 亚洲一区二区三区在线观看精品中文 | 中文字幕在线视频一区| 日韩精品在线一区二区| 精品欧洲av无码一区二区三区| 在线欧美精品一区二区三区| 在线观看中文字幕一区| 国产日韩高清一区二区三区|