Jadual Kandungan
回复讨论(解决方案)
Rumah hujung hadapan web html tutorial 谁能告诉我做网页界面的大体思路啊?_html/css_WEB-ITnose

谁能告诉我做网页界面的大体思路啊?_html/css_WEB-ITnose

Jun 24, 2016 am 11:42 AM

我是新手,已经做好了数据库相关的设计,现在就差界面了。
我心里有自己想要完成的设计,但不知道怎么实现。
大体上是这样的:
浏览器最上面10-20%是logo和背景
然后左边20%是超链接列表,右边80%是点击左边的超链接出现的网页。
!!!!!!!
我不知道该怎么实现啊!!!!!!而且列表标签我不知道怎么以有背景的形式呈现啊,每次呈现都是 ·xxxxx

我试过将w3c的源代码复制到我的编译器上,然后编译出来完全都没有背景图啊,就仅仅是列表。


回复讨论(解决方案)

到网上找个网站参考一下。

楼主就当我看不懂中文吧,,,能把你的需求做出图片需求进行说明不。。。。

大哥,你倒是来个大概图啊,草图也可以,用铅笔画的也可以。

至少这样才能给你弄个大概的布局。




不知道是不是中文学得好,大概写了一个。效果如下:



代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]:

<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en">    <meta charset="UTF-8">    <title>申请管理</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <style type="text/css">        .left {            width: 80px;            float: left;            background-color: #cccccc;        }    </style></head><body><header class="page-header">    这里是头部</header><div class="container left">    <nav class="text-center">        <ul class="list-unstyled">            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>        </ul>    </nav></div><div class="container-fluid">    <div class="embed-responsive embed-responsive-16by9">        <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe>    </div></div><footer>    这是底部文本</footer></body></html>
Salin selepas log masuk
Salin selepas log masuk

新手的优先要做的就是学习
一股浮躁之气



不知道是不是中文学得好,大概写了一个。效果如下:



代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]:

<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en">    <meta charset="UTF-8">    <title>申请管理</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <style type="text/css">        .left {            width: 80px;            float: left;            background-color: #cccccc;        }    </style></head><body><header class="page-header">    这里是头部</header><div class="container left">    <nav class="text-center">        <ul class="list-unstyled">            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>        </ul>    </nav></div><div class="container-fluid">    <div class="embed-responsive embed-responsive-16by9">        <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe>    </div></div><footer>    这是底部文本</footer></body></html>
Salin selepas log masuk
Salin selepas log masuk

谢谢 就是这样 我好好研究研究你的代码

嗯,加油,不过下次发帖还是有个图比较方便。





不知道是不是中文学得好,大概写了一个。效果如下:



代码如下[用了bootstrap,你可以参考:http://www.bootcss.com]:

谢谢 就是这样 我好好研究研究你的代码
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)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

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.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

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.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles