Rumah hujung hadapan web html tutorial 网页布局的时候先写HTML还是先写CSS

网页布局的时候先写HTML还是先写CSS

Dec 02, 2017 am 09:36 AM
css html

很多朋友都有自己的习惯,有的人喜欢先写CSS,有的人喜欢先写HTML,那么网页布局最科学的写法流程是什么呢?今天来给大家一起分析一下

网上有很多种对此的答案:先写HTML后写CSS;先写CSS后写HTML;两者同时写。

我在平时做html页面是选择的两者同时进行,首先先建立好网站大致目录文件,如imges:存放页面图片;js: 存放JS脚本语言,而CSS文件我建议直接放到images文件夹里,这样好处以免,在调用图片背景时候把图片路径搞错了,再是就是方便维护图片名称;自然html页面则放到根目录下。

然后我们先写HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS(ID与CLASS区别),这些布局部分包括外套部分,头部分,中间部分,左,中,右,版权部分等。其中头部、中间、底部基本都是大概页面的通用部分,大部分网页都是由这3个大部分组成。我们把这些部分用ID或class命名好后,再到css样式文件里写对应的css样式属性。而在css写前我们要把全局全站的div、h1、h2、字体、字体大小、li等等样式定义好这里不就不详细讲了,如想了解请进我用的全局定义css模板了解下载使用,这样以来就不用每次新做网站的时候而重新定义,而直接拷贝通用的基本CSS样式定义模板即可使用。

一般在制作DIV+CSS的时候新手最好是同时进行html与CSS,这样可以减少错误。在制作中如果经验不是很好的时候,希望在制作过程中多种不同的品牌版本浏览器中测试是否兼容有没有出现在这个浏览器中显示正常,而在另外浏览器却出现显示不全错乱等。从而解决和了解掌握基本兼容问题,积累宝贵的DIV+CSS技术经验,并习惯做上笔记,以免日后忘记。

下面我们了解下先写html然后再写css:
为什么说有些有经验者对新手说我们不可能一次性把HTML部分写好呢?因为人都是可能犯错误的,可能你的想法写的过程就是有问题的,或者为了浏览器的兼容性问题,有些是你由于经验的不足没有提前预料到,所以当你写样式时发现了问题时就有可能要改动你的HTML的代码。如果先把html写好后可能页面大了后,会忘记你在html中想到的对css属性布局选择。

接着我们了解下先写CSS然后再写html:
对应有经验的CSS制作者来说,这种是比较有可行性的比起先写html后写css来说。为什么呢?我们知道CSS的继承父级属性特点是相当好,这样以来我们可以通过这点来先写CSS。但是对于新手来说不能这样,如果你先写好CSS后在回到html页面写是回头看你写的css及会忘记怎么调用选择了,因对CSS兼容问题没有经验而同时这样兼容性也相当差。而有经验者通过父级继承特点来排版css文件代码,而返回html时调用CSS中class类和id时很清楚不容易出错。

通过以上对先后的写法都作出了介绍与解释,但是值得说的一般制作页面时候我们通常是采用两者同时进行+浏览器测试进行。两者同时或半先写css再写html或相反的半先写html再写css是非常好的,这样不容易出错,以免出错后浪费时间修改。

以上的说法不一定完全是正确但是通过以上想告诉DIV+CSS制作开发者,无论是先写html还是先写CSS这个并不重要,重要是你对div+css的喜爱加在日常不停的练习,你也可以HTML/CSS同时进行,都是可以的,看你的习惯。但你开发制作多了自然会总结出适合自己,而开发快的方法来。希望以上对你有帮助。


相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

CSS的文本字体颜色如何设置

在HTML的网页布局里div与span有什么区别

css里的font文字怎么设置

Atas ialah kandungan terperinci 网页布局的时候先写HTML还是先写CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Peranan React dalam HTML: Meningkatkan Pengalaman Pengguna Peranan React dalam HTML: Meningkatkan Pengalaman Pengguna Apr 09, 2025 am 12:11 AM

React menggabungkan JSX dan HTML untuk meningkatkan pengalaman pengguna. 1) JSX membenamkan HTML untuk menjadikan pembangunan lebih intuitif. 2) Mekanisme DOM maya mengoptimumkan prestasi dan mengurangkan operasi DOM. 3) UI pengurusan berasaskan komponen untuk meningkatkan kebolehkerjaan. 4) Pengurusan negeri dan pemprosesan acara meningkatkan interaktiviti.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

See all articles