基礎知識がなくても理解できる！デザイナーにとってフロントエンドの知識はほとんどありません: 全員が自分の職務を遂行する必要があります_html/css_WEB-ITnose

『基礎知識ゼロでもわかる！デザイナーのために書かれたフロントエンドの知識 初級編(1)』
『基礎知識ゼロでもわかる！デザイナーのためのちょっとしたフロントエンド知識：横暴なDIVを攻略する（後編）》
『基礎知識ゼロでもわかる！デザイナーのためのフロントエンド知識：Webページレイアウト（実務経験あり）』
『基礎知識ゼロでもわかる！デザイナーのためのフロントエンド知識のヒント：組版までの3ステップ》

ファイルパスの関係
さまざまなテキスト
組版の続き

しかし、Gao Keは注意する必要があります! ！ ！私は長い間、CSS の行の高さとボックスの高さの関係についてあまり知りませんでした。ただ 1 つずつ試して、適切であれば行間を決定していました。もちろん、情報には明確に説明されていませんでしたし、私が注意を払わなかったのかどうかはわかりません。ある日、マスターがボックスの高さを行間で割った値が、表示されるテキストの行数に等しいと教えてくれました。その時は、宝物を拾ったような気分でした、笑〜

つまり、ボックスの高さが 50px、line-height が 25px の場合、50/25=2 ということになります。 。つまり、割り切れない場合や小数の場合、一部の部分が見えにくくなる可能性があります。

最後のポイントは、余分なテキストを削除できるように、忘れずに overflow:hidden; を追加することです。この具体的な使用法は、後で組版で使用されます。

3. 改行のない長いテキスト

改行のない長いテキストとは、改行のない冗長なテキストが省略記号で置き換えられることを意味します。写真の黄色のマークの通りです。このようなテキストアプリケーションはたくさんあります。

まず、空白を使用して改行を強制的に行わないようにします。第 2 ステップ: オーバーフローを非表示にします。第 3 ステップ: テキスト オーバーフローを省略します。text-overflow:ellipsis; 非常に簡単ではないでしょうか。

4. カラフルなテキスト

写真にはないフォーマットですが、ふと思いつきました。実際のアプリケーションでは、テキストの段落内の特定の単語や文をより目立たせるために、色の変更、太字、および拡大などの操作が常に発生します。このとき、いくつかの軽量タグを選択する必要があります。通常、p タグには、次のような独自の行間隔と行折り返し属性があります。 div は少し大きく見えますが、これは少し使用されているだけです (ブロック レベル要素と非ブロック レベル要素については次のセクションで説明するので、自分でプレビューできます)。href リンクがない場合は、a タグが使用されます。基本的にどんなスタイルでもきれいな赤ちゃんというものはありません。レイアウトが混乱するなどの理由は避けられますが、問題が発生する場合は必ず発生するので、そのままにしておきます。これは栗です、ああ、いや、例です〜

例：今日は幸せではありません。

まず、全文を言うふりをしてください:

今日は幸せではありません。

次に、 a を使用して特別な処理が必要なテキストを含めます:

今日は 満足ではありません。

最後に、「nohappy」スタイルを自由にスタイルしてください。ただし、スタイルを適切な位置にわざわざ配置しないでください~ (ps: 太字にしたいだけの場合は、 < ;b>タグを使用してください~)

3. 植字

また楽しい時期が来ました。しかし、全員が職務を遂行する必要があると前に述べたので、今日は植字の前にスタイルをあるべき場所に移動する必要があります。 DW で

Ctrl+N を押して、新しい CSS ファイルを作成します:

すると、次のようなファイルが得られます:

UTF-8 は国際的なエンコードです。 utf-8以外のエンコードでファイルを保存すると文字化けが発生する場合があります。他にも GB-2312 などがあります。自分で確認してください。つまり、dw によって自動的に生成されたステートメントをいじらないでください。

ここで余談になりますが、実際、中国語は、おそらく非英語圏の国にとって、この種の外国技術にとって常に厄介なものでした。したがって、世界中で何かを使用するために、この種のコンピューターの仕様は別として、最も単純なキログラム、センチメートル、24 などの多くの仕様を策定する人が常にいます。 -時間タイマーなど…私たちがよく目にする国際規範のいくつかについて話しましょう。中国人以外に、1フィートは何センチ、1時間は何時間か知っている人がどれだけいると思いますか?

はい、これ以上言う必要はありません。続けましょう。

元々ヘッダーに記述されていたスタイルファイルをcssに切り出すと、ボックスを削除できます。このように:

保存するときは、この記事の最初のセクションで紹介したように、スタイル ファイルを専用のフォルダーに配置してください。

突然 HTML ファイルがかなりきれいになりましたね。

でも、パニックにならないでください。きれいになった、きれいになった、スタイルがなくなった、しかし連絡先情報さえ持っていない、それを使用する必要がある場合はどうすればよいですか？

それでは、ファイル内のスタイルを参照してください:

<strong><link href="css/index.css" type="text/css"  rel="stylesheet"></strong>

また、画像のパスを忘れないでください。私が上で言ったことを理解すれば、パスを完全に手で入力するのは素晴らしいことになると思います~

以前に、外側から内側に層ごとに処理する植字の基本的な手順をいくつか紹介しました。しかし、今日は植字の前に、以下に示すように、子供たちが個人的に私に尋ねた質問について説明したいと思います。ブラウザウィンドウを通常のレイアウトに狭めますが、このように問題は解決されません。

1. アウトソーシング

ここでいうアウトソーシングとは、チームのアウトソーシングを指すものではありません。 、ただし、箱の内側から外側へ。前にフローティングの話をしましたが、これはナビゲーションバーを配置した後、右側にまだ十分な距離があるため、画像が上に飛んでしまうためです。

我们从外到里已经做好了，现在得在它们的外包盒子了。外包的盒子的宽若刚刚好只放得下导航的内容，图片那一块不就下来了吗？

步骤还是那样啦，只不过从里往外包缺少了填内容那一步。定大小：定跟导航栏一样宽呀，多的留来也没用。定位置，当然是整个浏览器中间啦。可是你以为我会用margin-left来做吗？当然不，如果有个属性可以自动水平居中该多好。当然有：

<strong>margin: 0 auto;</strong>

遇到margin后面跟两个值各代表什么？不记得？往前翻……auto这个值，就是居中的意思，有了它，你会发现，浏览器窗口怎么放缩，都处在中间，是不是很嗨森？\(^o^)/~

2. 实战

好了，看看俺写好的：

是不是很像了？

以下是html及样式文件的编码，

看没看到新的东西，不仅外包了content，上面讲换行文本我们使用到了的哟。新添img标签和span标签，span这个标签，用在这种小型的，特殊的短文本是很好用的，详询： http://www.w3school.com.cn/tags/tag_span.asp 。

其次，有些属性也是新介绍的，比如：border（描边使用）,值什么意思看下图，是不是很亲切？除开solid这个值，当然还有其他值，乃们慢慢去试试。

再看看图中：

红色标示的部分，其实是可以复用黑色模块的东西的，只要稍作标题的颜色和大小调整即可。还有下面文前带点的文本，这样类似列表形式的文本，ul li标签是可以直接做到的，可以自己当做作业来做，下期就把上图中的东西全部排完了。

TIPS：排版中，我们多次为了让内容对齐，使用了margin-left：24px;即文本与黑框左边的距离。实际使用中，文本通常与装它的有色框是有一定距离的，为了美观，绝不会贴边出现：

但是每一句都加左边距，倒不如直接在black加内边距，单独每一句捏，就不需要加了:

.black{ width:356px; height:160px; background-color:#000000; opacity:0.6; margin-top:408px;padding-left:24px;}

注意了，这里有很重要的一点是：padding所加的左内边距是算在整个盒子宽内的，所以，width由原来的380px变为了356px。同样要是顶部加了padding-top，高也是相应要减掉一些的。

下图是随便网络一搜就能搜到的，但其实在实际使用中，width不仅仅是content里面的宽度，应该是要加上黄色的部分，曾经我有web工程师面试的时候就有这么一道题。或者说把紫色的边也加上，因为这些区域，除了空出来，服务于content，也放不了其他的了。且在没有margin的情况下，别的div要排也是贴着border，so……你懂的……-_-|||

好了，今天到这里，有疑问欢迎留言…

「设计师自学指南系列教程」

1. 平面设计： 《超赞！设计师完全自学指南》
2. 交互设计 ： 《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计： 《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发 ： 《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧： 《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案： 《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南： 《基础知识学起来！为设计师量身打造的DPI指南》

作者：Sunny萧萧

【优设网 原创文章 投稿邮箱：2650232288@qq.com】